logo标签列表

使用 Istanbul 对 JSX 测试进行代码覆盖率分析

code-coveragereactjsistanbul
6

我正在尝试对我的代码进行仪器测试以获取一些覆盖率信息，但有些东西正在溜走。

我使用以下命令启动 istanbul：

node_modules/.bin/istanbul cover ./node_modules/mocha/bin/_mocha -- -u exports -R spec

我的 mocha.opts 看起来像这样：

app/assets/javascripts/components/**/*-mocha.jsx
--compilers jsx:mocha/compiler.js

一切似乎都运行良好（至少测试可以运行），但我只得到了有关将JSX编译为JavaScript的文件的覆盖率（用于compiler.js）。

compiler.js                 100%
jsx-stub-transform.js       65%

非常有用...

有什么想法吗？

2个回答
2

我使用 gulp-jsx-coverage。

这是我的配置示例：

var jsxCoverage = require('gulp-jsx-coverage');
gulp.task('test', ['lint', 'env:test'], jsxCoverage.createTask({
    src: ['src/**/*_test.js', 'src/**/*_test.jsx'],  // will pass to gulp.src as mocha tests
    istanbul: {                                      // will pass to istanbul
        coverageVariable: '__MY_TEST_COVERAGE__',
        exclude: /node_modules|tests|._test/         // do not instrument these files
    },
    transpile: {                                     // this is default whitelist/blacklist for transpilers
        babel: {
            include: /\.jsx?$/,
            exclude: /node_modules/
        }
    },
    coverage: {
        reporters: ['text', 'lcov', 'cobertura'],    // list of istanbul reporters
        directory: 'coverage'                        // will pass to istanbul reporters
    },
    mocha: {                                         // will pass to mocha
        reporter: 'spec'
    },
    babel: {                                         // will pass to babel
        sourceMap: 'inline',                         // get hints in HTML coverage reports
        plugins: []
    }
}));

* 更新 *

随着时间的推移，我决定停止使用gulp-jsx-coverage。我的测试使用babel-rewire-plugin，而gulp-jsx-coverage没有正确地对我的文件进行仪器化，导致覆盖率报告包含了一堆未经测试的生成代码。这不太好。

请查看我的第二个答案以获取我的当前设置。

是的，那是一个选项，但我不想仅为了覆盖率而引入gulp/grunt/broccoli。实际上，我找到了一种实现我所寻找的方法，很快我会在这里发布结果。 - domokun
@domokun 有关那个结果的任何消息吗？很想看看你有什么。 - Kyle Kelley
我最终放弃了gulp-jsx-coverage。我会更新我的答案，分享我的当前配置。 - Jeff Fairley
2
我正在直接使用 mocha 和 isparta，并配合 Babel 6 使用，如下所示：

npm test 命令

BABEL_ENV=test babel-node node_modules/isparta/bin/isparta cover _mocha

.babelrc

{
    "plugins": [
        "add-module-exports",
        "transform-decorators-legacy",
        "transform-runtime"
    ],
    "presets": [
        "es2015",
        "react",
        "stage-0"
    ],
    "env": {
        "test": {
            "plugins": [
                "rewire"
            ]
        }
    }
}

test/mocha.opts

--compilers js:babel-core/register
--require test/init.js

src/**/*_test.js*

test.init.js

'use strict';

require('mock-require')('clappr');
require('testdom')('<html><body></body></html>', {
    React: 'react',
    localStorage: 'localStorage'
});

.istanbul.yml

instrumentation:
  root: src
  excludes: ['*_test.js']

从 package.json 中选择依赖项

"babel-cli": "^6.7.5",
"babel-core": "^6.7.2",
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-rewire": "^1.0.0-rc-2",
"babel-plugin-runtime": "^1.0.7",
"babel-plugin-syntax-jsx": "^6.5.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.7.2",
"babel-runtime": "^5.8.34",
"babel-template": "^6.7.0",
"babel-types": "^6.7.2",
"isparta": "^4.0.0",
"mocha": "^2.4.5",

.JSX 文件说明

我把所有的 .JSX 文件重命名为 .JS，原因如下：

  • 我使用 codecov 进行托管覆盖率报告。这揭示了一个事实，即尽管 coverage/lcov-report/index.html 显示了正确的覆盖率，但是 JSON 覆盖文件中的 .JSX 文件缺少一些内容。我从未能够弄清楚这是什么原因。据我所知，这是 isparta 或 istanbul 中的一个 bug。我还尝试过 istanbul@1.0.0-alpha.2，发现它也有同样的问题。
  • React 曾经建议将文件命名为 .JSX，以便于转换工具和编辑器使用。但是现在不再建议这样做了。据我所知，这已经不再重要了。

自从改用 .JS 之后，我没有遇到任何工具问题，包括 Atom 和 IntelliJ。

如果您不想重命名文件，可以在我的上述示例中添加以下内容：

在脚本中，在 isparta cover 后面添加 --include \"src/**/*_test.jsx\"。
在 .istanbul.yml 中添加：
extensions:
  - .js
  - .jsx
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接