将 Jest 覆盖阈值添加到 create-react-app 项目答案

【问题标题】：Add Jest coverage threshold to create-react-app project将 Jest 覆盖阈值添加到 create-react-app 项目
【发布时间】：2017-10-09 23:20:04
【问题描述】：

这是最初使用create-react-app 生成的package.json 文件的"scripts" 部分：

"scripts": {
  "start": "concurrently \"react-scripts start\" \"node server.js\"",
  "build": "react-scripts build",
  "eject": "react-scripts eject",
  "test": "react-scripts test --env=jsdom --coverage --watchAll",
  "start:server": "node server"
},

我想将 Jest 配置为具有这样的 coverage threshold：

"jest": {
  "coverageThreshold": {
    "global": {
      "branches": 100,
      "functions": 100,
      "lines": 100,
      "statements": 100
    }
  }
}

但是，当我运行 yarn test 时，它看起来不像 "jest" 部分正在执行。我需要添加一些额外的东西吗？这个项目是用create-react-app 构建的？

谢谢！

【问题讨论】：

标签： javascript reactjs jestjs package.json create-react-app

【解决方案1】：

`package.json`

将新的npm script 添加到报道中

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "coverage": "npm test -- --coverage",
    "eject": "react-scripts eject"
}

并添加jest config

"jest": {
    "coverageThreshold": {
      "global": {
        "statements": 100,
        "branches": 50,
        "functions": 100,
        "lines": 100
      }
    }
  },

npm run coverage

【讨论】：

【解决方案2】：

您可以覆盖create-react-app#coverage-reporting 指示的某些覆盖率报告指标。请注意，这必须在您的 package.json 中配置，因为这是 create-react-app 查找您覆盖的地方（也就是不在 .jestrc 或 jest.config.js 文件中）。但正如@Andreas 提到的，如果您想要完全控制，请弹出或创建自己的配置。

作为旁注，您可以使用 --config 标志和 test 脚本（来自 jest）从 create-react-app 中提取 jest 配置，然后将其复制到您自己的配置中更新。可能比弄清楚 create-react-app 正在做什么更容易。

【讨论】：

【解决方案3】：

现在，react-app-rewired 可能是一条新的道路。

您可以在此处提到的 jest 部分中在 package.json 中配置 Jest： https://github.com/timarney/react-app-rewired#2-jest-configuration---testing

【讨论】：

【解决方案4】：

问题在于create-react-app 使用自己的设置here。最简单的方法是弹出：npm run eject，以完全控制设置。

另一种方法是将所有设置复制到您自己的设置中并使用附加参数--config=<pathToYourSettings>开始测试

【讨论】：

【解决方案5】：

你可以参考这个最新的链接：Configuring threshold limit

通过将其添加到您的 package.json：

"jest": {
    "coverageThreshold": {
      "global": {
        "branches": 75,
        "functions": 75,
        "lines": 75,
        "statements": 75
      }
    }
  }

【讨论】：