Question

我已经使用React，Cypress，Cucumber和Cypress Image Snapshot创建了一个项目，以测试前端测试。一切正常，现在我想对所执行的黄瓜测试进行一些代码覆盖。

我尝试按照此处（https://github.com/cypress-io/code-coverage）的建议进行设置，但是没有运气。

我也尝试过此解决方案（https://github.com/cypress-io/cypress/issues/346#issuecomment-365220178），但结果相同。

测试成功结束，但是代码覆盖率显示Unknown% 0/0用于语句，分支，函数和行。

我当前的设置：

support/index.js

import '@cypress/code-coverage/support'
import './commands'

plugins/index.js

const cucumber = require('cypress-cucumber-preprocessor').default;
const {
  addMatchImageSnapshotPlugin,
} = require('cypress-image-snapshot/plugin');

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

Answer 1

由于您还没有提到有关对应用程序进行检测的任何内容，因此应该对要测试的Web应用程序进行检测，以使代码覆盖率正常工作。

有关检测应用程序的更多信息

https://github.com/cypress-io/code-coverage#instrument-your-application

Answer 2

代码覆盖率要求首先检测您的代码。在React应用程序中，检测代码的最简单方法是使用@cypress/instrument-cra。只需在package.json中的启动脚本中添加此工具

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

这将在每次启动应用程序时对代码进行检测，并在应用程序的根目录下生成一个.nyc-output文件夹，其中将包含所有检测到的代码。您可以通过检查窗口覆盖对象来验证是否检测了代码。

完成设置：

package.json

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

::::

"nyc": {
"extends": "@istanbuljs/nyc-config-typescript",
"all": true,
"report-dir": "coverage",
"reporter": [
  "text",
  "json",
  "lcov",
  "html"
],
"include": [
  "src/**/*.js"
],
"exclude": [
  "**/*.test.js",
  "**/test.js",
  "src/**/*.test.js",
  "src/**/**/*.test.js"
]

}

plugins / index.js

module.exports = (on, config) => {
require('@cypress/code-coverage/task')(on, config);
return config;

support / index.js

import '@cypress/code-coverage/support';

黄瓜-赛普拉斯伊斯坦布尔整合

2 个答案: