Reactjs 黄瓜-柏树一体化

我用React、Cypress、Cucumber和Cypress图像快照制作了一个项目，以测试前端测试。所有的工作都很好，现在我想为执行的Cumber测试获得一些代码覆盖率

我曾尝试按照此处（）的建议设置它，但没有成功

我也尝试过这个解决方案（），但结果相同

测试以成功结束，但代码覆盖率显示语句、分支、函数和行的

Unknown%0/0

---

我当前的设置：

support/index.js

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

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());
};

plugins/index.js

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

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());
};

---

因为您没有提到任何有关检测应用程序的内容，所以应该检测您正在测试的web应用程序，以便代码覆盖率正常工作

有关检测应用程序的详细信息

---

代码覆盖率要求首先检测代码。在React应用程序中，插入代码的最简单方法是使用。只需在package.json的开始脚本中添加此指令

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

"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"
]

这将在每次启动应用程序时插入代码，并在应用程序根目录下生成一个.nyc输出文件夹，其中将包含所有插入的代码。 您可以通过检查窗口覆盖率对象来验证代码是否已插入指令

完成设置：

package.json

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

"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"
]

}

插件/index.js

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

support/index.js

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

---

您已经知道您正在测试您正在测试的应用程序的覆盖率，对吗？为了使cypress代码覆盖率正常工作，应该检测您正在测试的应用程序。