通过babel,nyc和istanbul插件从Cypress获得代码覆盖率吗?

时间:2019-08-07 09:52:17

标签: reactjs testing babel cypress istanbul

对于React / Redux项目,我使用赛普拉斯来测试UI。我需要从那些测试中获得代码覆盖率,才能在Sonar中获得详细信息(但这是另一回事了。)

所以我开始阅读赛普拉斯的文档:https://docs.cypress.io/guides/tooling/code-coverage.html

我按照说明进行操作,找到了不同的插件,但没有任何效果。在运行赛普拉斯测试后,我没有覆盖范围的结果,当我尝试在转译时使用带工具代码的服务器运行服务器并尝试获得window.__coverage__时,它就是undefined

这是我的配置。

我的devDep和NYC conf在 package.json 中:

"devDependencies": {
    "@cypress/code-coverage": "^1.8.0",
    "babel-cli": "^6.26.0",
    "babel-plugin-istanbul": "^5.2.0",
    "babel-plugin-react-intl": "^2.4.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-react-app": "^3.1.2",
    "cross-env": "^5.2.0",
    "cypress": "3.1.0",
    "istanbul-lib-coverage": "^2.0.5",
    "jest-junit-reporter": "^1.1.0",
    "junit": "^1.4.9",
    "nyc": "^14.1.1",
    "react-test-renderer": "^16.3.0"
     [...]
},
"scripts": {
    "start": "react-scripts start",
    [...]
    "test:unit:local": "react-scripts test --env=jsdom .*_test.js",
    "test:unit": "npm run test:unit:local -- --ci --coverage --testResultsProcessor ./node_modules/jest-junit-reporter",
    "test:integ:local": "cypress run --reporter junit",
    "test:integ": "start-server-and-test start http://localhost:3000 test:integ:local",
    "test": "cross-env NODE_ENV=test && npm run test:unit && npm run test:integ"
},
"nyc": {
    "sourceMap": false,
    "instrument": false
}

我的.babelrc文件:

{
"presets": ["@babel/preset-react"],
"plugins": [
    [ "react-intl", {
        "messagesDir": "./src/messages",
        "extractSourceLocation": true
    }],
    "transform-class-properties",
    "istanbul"
],
"env": {
    "test": {
      "plugins": [ "transform-class-properties", "istanbul" ]
    }
  }
}

我的\cypress\support\index.js包含以下行:

import '@cypress/code-coverage/support'

这是我的\cypress\plugins\index.js

module.exports = (on, config) => {
    on('task', require('@cypress/code-coverage/task'))
    on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))
    return config
}

因此,我希望得到的结果像您在赛普拉斯文档中所见。 网站已生成,但包含覆盖率报告的文件为空。

我不了解我的配置出了什么问题。

2 个答案:

答案 0 :(得分:0)

我也遇到了这个问题。无法获得代码覆盖率。将nyc版本从14.x.x降级到13.x.x可以解决此问题,如here所述。

答案 1 :(得分:0)

尝试以下行:

"start": "react-scripts -r @cypress/instrument-cra start",