我的项目中遇到了完全相同的问题。我找不到任何可以简单地解决这个问题的库或配置，但是通过一些实现和 Grunt 配置，您可以从 Grunt 进程中获得代码覆盖率。
我在项目中使用的依赖项：
"chai": "^3.5.0",
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.7.0",
"grunt-contrib-copy": "^0.8.2",
"grunt-express-server": "^0.5.3",
"grunt-istanbul": "^0.7.1",
"grunt-mocha-test": "^0.12.7",
"istanbul": "^0.4.4",
"nightmare": "^2.2.0"
我的项目结构：
public/ -- public folder for index.html
src/ -- source folder for hello.js
test/ -- mocha tests implementation
server/ -- express implementation for server.js
coverage/ -- HTML report from code coverage
report/ -- HTML report from mocha tests
dist/ -- folder which is used by express server to get content, generated by Grunt
您必须从 Grunt 运行的步骤：
grunt.registerTask('test_hello', [
'clean', // clean dist/ folder
'copy:public', // copy public files from public/ (ex. index.html) to dist/
'instrument', // generate instruments (ex. hello.js) for code coverage from src/ by istanbul
'express', // run express server from dist/ folder
'mochaTest', // run mocha tests with nightmare and generate HTML report to report/ folder
'report_coverage' // generate HTML report from code coverage to coverage/ folder
]);
咕噜声配置：
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-express-server');
grunt.loadNpmTasks('grunt-istanbul');
grunt.loadNpmTasks('grunt-mocha-test');
grunt.initConfig({
clean: {
dist: ['dist/', 'report/', 'coverage/']
},
copy: {
public: {
expand: true,
cwd: 'public/',
src: ['**'],
dest: 'dist/'
}
},
instrument: {
files: ['**/*.js'],
options: {
cwd: 'src/',
lazy: true,
basePath: 'dist/'
}
},
express: {
dev: {
options: {
port: 9000,
script: 'server/server.js',
background: true
}
}
},
mochaTest: {
hello: {
options: {
timeout: 10000,
captureFile: 'report/results.txt', // Optionally capture the reporter output to a file
quiet: false, // Optionally suppress output to standard out (defaults to false)
clearRequireCache: false // Optionally clear the require cache before running tests (defaults to false)
},
src: ['test/*.js']
},
}
});
grunt.registerTask('report_coverage', function () {
var coverage = require('./test/utils/coverage');
coverage.generateReport();
});
grunt.registerTask('test_hello', [
'clean', // clean dist/ folder
'copy:public', // copy public files from public/ (ex. index.html) to dist/
'instrument', // generate instruments (ex. hello.js) for code coverage from src/ by istanbul
'express', // run express server from dist/ folder
'mochaTest:hello', // run mocha tests with nightmare and generate HTML report to report/ folder
'report_coverage' // generate HTML report from code coverage to coverage/ folder
]);
}
我还创建了一个类，它允许我从每个 Nightmare 实例中收集代码覆盖率：
var istanbul = require('istanbul');
var reporter = new istanbul.Reporter(),
sync = true;
var Coverage = function () {
this.loadCodeCoverage = function (dom, done) {
dom
.evaluate(function () {
return window.__coverage__; // this variable store all information about code coverage
})
.then(function (coverageDate) {
if (coverageDate) {
this.getCollector().add(coverageDate);
}
done();
}.bind(this))
.catch(function (error) {
done(error);
});
}
// load page by nightmare
this.getCollector = function () {
if (!this.collector) {
this.collector = new istanbul.Collector();
}
return this.collector;
}
this.generateReport = function () {
reporter.add('text');
reporter.addAll(['lcov', 'clover']);
reporter.write(this.collector, sync, function () {
console.log('All reports generated');
});
}
}
module.exports = new Coverage();
对于上述配置文件 test/test.js 应该具有以下结构：
var should = require('should');
var coverage = require('./utils/coverage');
/*global describe */
/*global it */
describe('Simple demo', function () {
this.timeout(15000);
var url = 'http://localhost:9000';
before(function (done) {
global.dom = new Nightmare()
.goto(url)
.evaluate(function () {
return 'test';
})
.then(function(result) {
done();
})
.catch(function(error) {
done(error);
});
});
after(function (done) {
coverage.loadCodeCoverage(dom, done);
});
it('check hello world result', function (done) {
dom.evaluate(function () {
/*global hello */
return hello();
})
.then(function(value) {
var expected = "world";
if (value === null) {
false.should.equal(true);
return done();
}
value.should.equal(expected);
return done();
})
.catch(function(error) {
done(error);
});
});
it('should get the index title', function (done) {
var expected = 'My Website';
dom.title(function (title) {
title.should.equal(expected);
done();
});
});
});
如果一切正常，您应该获取控制台信息，并且应该在文件夹 coverage/ 中生成 HTML 形式的代码覆盖率报告
Running "report_coverage" task
------------------------------------|----------|----------|----------|----------|----------------|
File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines |
------------------------------------|----------|----------|----------|----------|----------------|
js/ | 100 | 100 | 100 | 100 | |
hello.js | 100 | 100 | 100 | 100 | |
------------------------------------|----------|----------|----------|----------|----------------|
All files | 100 | 100 | 100 | 100 | |
------------------------------------|----------|----------|----------|----------|----------------|
我仍然遇到的问题是，对于每个测试描述，我必须添加方法before和after. 将这些实现仅放在一个地方可能会很好，例如在 Grunt 配置中的某个地方，当我进行新的测试描述时，我不需要记住它们。
如果有人找到更通用的解决方案before和after方法，将不胜感激。