运行摩卡 + 伊斯坦布尔 + 巴别塔

Question

我在使用 Mocha 和 Babel 编译器运行伊斯坦布尔时遇到了一些问题。

我所有的测试都运行很好，但是在完成所有测试之后它显示了这条消息：

No coverage information was collected, exit without writing coverage information

它没有生成任何覆盖率报告。

我是运行的命令是：

NODE_ENV=test istanbul cover _mocha -- --require babel-core/register --recursive

项目托管于 GitHub： https://github.com/weslleyaraujo/react-flux-puzzle/tree/feat/unit-tests-24

有什么想法吗？

Answer 1

使用 Babel 6.x，假设我们有文件 test/pad.spec.js:

import pad from '../src/assets/js/helpers/pad';
import assert from 'assert';

describe('pad', () => {
  it('should pad a string', () => {
    assert.equal(pad('foo', 4), '0foo');
  });
});

安装一堆垃圾：

$ npm install babel-istanbul babel-cli babel-preset-es2015 mocha

创建 .babelrc:

{
  "presets": ["es2015"]
}

运行测试：

$ node_modules/.bin/babel-node node_modules/.bin/babel-istanbul cover \   
node_modules/.bin/_mocha -- test/pad.spec.js


  pad
    ✓ should pad a string


  1 passing (8ms)

=============================================================================
Writing coverage object [/Volumes/alien/projects/forked/react-flux-puzzle/coverage/coverage.json]
Writing coverage reports at [/Volumes/alien/projects/forked/react-flux-puzzle/coverage]
=============================================================================

=============================== Coverage summary ===============================
Statements   : 100% ( 4/4 )
Branches     : 66.67% ( 4/6 ), 1 ignored
Functions    : 100% ( 1/1 )
Lines        : 100% ( 3/3 )
================================================================================

更新：我已经成功使用 nyc（消耗 istanbul）而不是 istanbul/babel-istanbul .这有点不那么复杂。试试看：

安装东西（你可以删除 babel-istanbul 和 babel-cli）：

$ npm install babel-core babel-preset-es2015 mocha nyc

如上所述创建.babelrc。

执行这个：

$ node_modules/.bin/nyc --require babel-core/register node_modules/.bin/mocha \ 
test/pad.spec.js

...这应该会给您类似的结果。默认情况下，它将覆盖信息放入 .nyc-output/，并在控制台中打印一个漂亮的文本摘要。

注意： 在 package.json 的 scripts 字段中放置命令时，您可以从任何这些命令中删除 node_modules/.bin/。

Answer 2

PS: I now recommend to use single jest instead of mocha/instanbul/nyc/chai/etc.

解决方案 A：使用 nyc and babel-plugin-istanbul

设置 ~~（不要忘记 @next for nyc）~~:

npm install --save-dev nyc babel-plugin-istanbul babel-register

将环境添加到 babel 配置：

{
  "env": {
    "nyc": { "plugins": ["istanbul"] }
  }
}

nyc 配置：

{
  "reporter"   : ["text", "text-summary", "lcov", "html"],
  "include"    : ["src/**/*.js"],
  "require"    : ["babel-register"],
  "sourceMap"  : false,
  "instrument" : false,
  "all"        : true
}

PS: include字段需要在package.json的.nycrc中指定，如果在命令行中指定，覆盖将不起作用

运行测试：

# 1. Build
NODE_ENV=nyc babel src --out-dir lib

# 2. Coverage
nyc mocha

解决方案 B：没有额外的包：只有基本的包

最近在伊斯坦布尔完成了工作（例如1.0.0-alpha.2) to support Babel generated code with sourcemaps (see #212 and this）。

有两种方法：

一个。针对先前转译的代码编写的测试
乙。针对原始代码编写的测试，并在运行时间

B1。导出（以前）转译代码的测试

这分两步完成：首先，使用 babel 构建您的源代码（例如从 ./src 到 ./out）并针对转译的源代码编写测试 (export foo from "./out/foo";)。

然后您将能够运行使用伊斯坦布尔 1.0.0-alpha.2 进行测试：

istanbul cover _mocha -- ./test --compilers js:babel-register

现在，如果您希望代码覆盖遵循您编写的原始代码（而不是转译后的代码），请确保使用 babel source-maps options set to both 进行构建：

babel ./src --out-dir ./out --source-maps both

PS: 如果需要你也可以这样做:

istanbul cover _mocha -- ./test --compilers js:babel-register \
   --require babel-polyfill \
   --require should \
   --require sinon

B2。直接导出原始代码的测试

在这种情况下，您针对原始源 (export foo from "./src/foo";) 编写测试，无需进一步的步骤，您直接运行 istanbul 1.0.0-alpha.2 使用 babel-node 针对 cli.js：

babel-node ./node_modules/istanbul/lib/cli.js cover _mocha -- ./test

PS: 如果需要你也可以这样做:

babel-node ./node_modules/istanbul/lib/cli.js cover _mocha -- ./test
   --require babel-polyfill \
   --require should \
   --require sinon

Answer 3

截至 2016 年 4 月 17 日，这个覆盖率报告内容仍然有点混乱，我的 React 项目有 .jsx 文件和一个帮助文件，覆盖率报告脚本如下所示：

istanbul cover node_modules/mocha/bin/_mocha -- \
   --compilers js:babel-core/register \
   --require ./test/testhelper.js  \
   \"test/**/*@(.js|.jsx)\"

所以 Istanbul 的当前版本 0.4.3 不能与 Babel 一起工作并不容易，因此您必须使用实验性 alpha 版本：

npm install istanbul@1.0.0-alpha.2 --save-dev

然后您需要 .istanbul.yml -文件以便伊斯坦布尔识别具有这些行的 .jsx 文件：

instrumentation:
  root: .
  extensions: ['.js', '.jsx']

现在应该可以了。如果您想使用 Travis 和 Coveralls 添加覆盖率报告，您还应该作为一个小奖励：

启用 https://coveralls.io
添加工作服npm i coveralls --save-dev

将此添加到您的 .travis.yml:

script:
  - npm --silent test
  - cat ./c
coverage/lcov.info | coveralls

现在您可以将这个很酷的标志添加到您的自述文件中。 Neato！

运行摩卡 + 伊斯坦布尔 + 巴别塔

Running Mocha + Istanbul + Babel

mocha.js

node.js

istanbul

babeljs

解决方案 A：使用 nyc and babel-plugin-istanbul

解决方案 B：没有额外的包：只有基本的包

B1。导出（以前）转译代码的测试

B2。直接导出原始代码的测试

运行 摩卡 + 伊斯坦布尔 + 巴别塔

Running Mocha + Istanbul + Babel

mocha.js

node.js

istanbul

babeljs

解决方案 A：使用 nyc and babel-plugin-istanbul

解决方案 B：没有额外的包：只有基本的包

B1。导出（以前）转译代码的测试

B2。直接导出原始代码的测试

运行摩卡 + 伊斯坦布尔 + 巴别塔