Grunt provide html report for mocha test

Question

I use grunt to run my mocha test and I see the test result in the console which is OK, the problem is that this task are generating report but when you run this HTML report you just see the log of running in text...I want to see the test aggregations ,and the mocha unit test are run OK, what I am missing here?

mochaTest: {
    test: {
        options: {
            reporter: 'spec',
            colors: true,
            summery: true,
            captureFile: 'results.html', // Optionally capture the reporter output to a file
            quiet: false, // Optionally suppress output to standard out (defaults to false)
            clearRequireCache: true // Optionally clear the require cache before running tests (defaults to false)
        },
        src: ['test/*spec.js'],
        excludes: ['plugins']
    },
    'travis-cov': {
        options: {
            reporter: 'travis-cov'
        }
    }
},

I use the package grunt.loadNpmTasks('grunt-mocha-test');

https://github.com/pghalliday/grunt-mocha-test

I want Report like this or any other nice html report which I can use...

Answer 1

You can use Mochawesome is a custom reporter for use with the Javascript testing framework, mocha. It generates a nice HTML/CSS report that helps visualize your test suites:

First, you need to install the plugin:

npm install --save-dev mochawesome

Then you change your grunt-mocha-test reporter :

mochaTest: {
    test: {
        options: {
            reporter: 'mochawesome', //You need to change this !
            colors: true,
            summery: true,
            captureFile: 'results.html',
            quiet: false,
            clearRequireCache: true
        },
        src: ['test/*spec.js'],
        excludes: ['plugins']
    },
    'travis-cov': {
        options: {
            reporter: 'travis-cov'
        }
    }
},