nx脚手架下react项目覆盖率_react nx-优快云博客

本文链接：https://blog.youkuaiyun.com/lionking0318/article/details/131555436

一，NX介绍

构建工具是任何网络开发者的宝贵资产。目前，许多伟大的构建工具可用于所有领先的JavaScript框架。Nx是一个构建框架，它允许你在原地构建单体和脚手架完整的应用程序，就是这样一个最近越来越受欢迎的例子。

Nx将开发人员在构建应用程序时通常必须手动执行的许多步骤自动化。它包括计算缓存、依赖图和构建自动化等功能，还包括与Cypress的插件集成。

二，项目覆盖率采集

1，覆盖率框架选择

由于NX生成的项目包含了Cypress,所以我们可以使用@cypress/code_coverage插件来生成覆盖率数据。

cypress-io/code-coverage：https://github.com/cypress-io/code-coverage

2，生成项目集成覆盖率插件

（1）使用nx脚手架生成react项目

参考：https://nx.dev/tutorials/react-standalone-tutorial

npx create-nx-workspace@latest myreactapp --preset=react-standalone

项目结构如下：

（1）按github上面介绍的步骤，进行插件的集成操作：

（a）安装插件

npm install -D @cypress/code-coverage 或者 yarn add @cypress/code-coverage -D

(b) 添加cypresss配置文件

在项目根目录下创建文件夹cypress，同时添加如下文件：

Add to your cypress/support/index.js file，文件内容如下：

import '@cypress/code-coverage/support'

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

  // add other tasks to be registered here

  // IMPORTANT to return the config object
  // with the any changed environment variables
  return config
}

（c）添加配置

在项目的.babelrc文件中添加如下插件，

{ "plugins": ["istanbul"] }

或是babel.config.json文件中添加如下插件：

{
  "presets": ["@nrwl/web/babel"],
  "babelrcRoots": ["*"],
  "plugins": [
    [
      "@babel/plugin-transform-typescript",
      {
        "allowNamespaces": true,
        "isTSX": true
      }
    ],
    ["istanbul"]
  ]
}

（d）运行项目yarn start,查看覆盖率数据生成的情况：

3，生成覆盖率报告

（1）通过前端覆盖率插件，将项目生成的window.__coverage__数据上传到精准测试平台指定的位置，然后将覆盖率数据文件拷贝到项目下的.nyc_output文件夹中。

（2）在项目的package.json文件的尾部添加nyc配置：

"nyc": {
  "reporter": [
    "html",
    "text-summary"
  ],
  "extension": [
    ".js",
    ".ts",
    ".tsx"
  ]
}

（3）在项目根目录下执行生成报告命令：nyc report --report=html

命令输出覆盖率汇总信息，同时生成覆盖率报告文件夹coverage.

（4）进入coverage文件夹，打开覆盖率报告。

前端覆盖率报告生成完成！