使用 Cypress 和 React 应用程序获取代码覆盖率报告

Question

我正在处理一个客户给我的项目，该项目具有现有的代码库。它基于 React，不使用 Create-React-App。我根本不是最精通使用 babel 和 webpack，因为我通常依赖 CRA 和 react-scripts。我正在使用 Cypress 和 Istanbul 进行单元测试，在遵循文档和几个指南之后，我无法生成代码覆盖率报告。

我不完全确定任何寻求帮助的人都需要哪些代码，所以我会将我认为相关的内容放在这里，并根据任何评论者的建议添加。

我的 babelrc 文件：

  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      },
      "@babel/preset-react"
    ]
  ],
  "plugins": [
    [
      "module-resolver",
      {
        "root": [
          "./src"
        ]
      }
    ],
    [
      "@babel/plugin-syntax-dynamic-import"
    ],
    [
      "transform-class-properties"
    ],
    [
      "istanbul"
    ]
  ],
  "env": {
    "test": {
      "plugins": [
        "istanbul"
      ]
    },
    "e2e": {
      "plugins": [
        "istanbul"
      ]
    }
  }
}

柏树插件的index.js：

// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

/**
 * @type {Cypress.PluginConfig}
 */
// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config)
  on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))
  return config
}

我对 Cypress 的支持文件夹的 index.js：

import '@cypress/code-coverage/support'

以及我为测试而执行的脚本

 "cy": "cypress run && nyc report --reporter=text --reporter=text-summary"

一切都由纽约市检测。

感谢您的帮助！

Answer 1

https://github.com/RickChihu/CypressFW#instrument

仪器可能丢失。 （：