有关伊斯坦布尔JSX测试的代码覆盖率

时间:2015-05-18 10:27:52

标签: reactjs code-coverage react-jsx istanbul

我正在尝试检测我的代码以获得一些覆盖并运行,但是有些东西在我的手指上滑落。

我使用以下内容启动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 个答案:

答案 0 :(得分: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-plugingulp-jsx-coverage没有正确检测我的文件,导致报告中包含一堆未经测试的生成代码。没有bueno。

See my 2nd answer我当前的设置。

答案 1 :(得分:2)

我正在使用mochaisparta直接使用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显示了正确的覆盖范围,但.JS文件中缺少JSON覆盖文件中的某些内容。我无法弄明白。据我所知,它是isparta或伊斯坦布尔的一个错误。我也试过istanbul@1.0.0-alpha.2并发现它有同样的问题。
  • React用于推荐命名文件.JSX,以便转换实用程序和编辑器。这不再是推荐。据我所知,它不再重要了。

由于切换到.JS,我还没有看到包括Atom和IntelliJ在内的工具出现任何问题。

如果您不想重命名文件,可以在上面的示例中添加以下内容:

  1. 在脚本中isparta cover之后,添加--include \"src/**/*_test.jsx\"
  2. .istanbul.yml,请添加
  3. extensions:
      - .js
      - .jsx