我一直在尝试使用 Cypress v12 检测 NextJS typescript 项目的覆盖率，但官方文档似乎是针对 javascript 的 Cypress 版本 < 10. I cannot seem to get anything back when I type
window.__coverage____coverage__Could not find any coverage information in your application
by looking at the window coverage object.
Did you forget to instrument your application?
See code-coverage#instrument-your-application
[@cypress/code-coverage]
我已经用 lcov 开玩笑了，并且一直在用它进行我的单元测试。 Babel 也已在 Cypress 之前安装。 instrument-cra 包不适用于 Next.js 项目
我需要在几篇文章中保持一致：
看起来我可能需要：
我尝试使用 cypress 文档中引用的示例存储库以多种方式检测覆盖率。有时我似乎能够取得进展，但随后出现此错误：
TypeError
invalid pattern
Because this error occurred during a after each hook we are skipping all of the remaining tests.
View stack trace
Print to console
at assertValidPattern
我也很困惑，为什么以及是否需要在 jest 已经存在的项目上进行检测，如果我需要专门使用 babel-plugin-istanbul 而不是内置于 jest 的 nyc，这是如何工作的？当我将它添加到我的 package.json 和我的 .babelrc 时，Ot 似乎没有做任何事情。我到底需要做什么才能让
window.__coverage__我的package.json在项目开始之前添加包：
{
"name": "next",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "yarn build:version-config && next build && next export",
"start": "next start",
"start:e2e": "next start -p 3002",
"start:dev:e2e": "next dev -p 8081",
"lint": "next lint",
"build:version-config": "npx ts-node scripts/build-version-config.ts",
"iterable:sync": "npx ts-node scripts/sync-email-templates.ts",
"cypress:open": "cypress open --env CYPRESS_ENV=dev,<company>BASE_URL=api.staging.<company>.com",
"cypress:run": "cypress run --env <company>BASE_URL=api.staging.<company>.com",
"cypress:contract": "cypress run --spec cypress/integration/dashboard.spec.js",
"test": "yarn test:unit",
"test:unit": "npx jest",
"test:watch": "jest --watch",
"test:ci:unit": "jest --silent --ci --runInBand",
"apollo:sync": "yarn apollo:sync:remove && yarn apollo:sync:download && yarn apollo:sync:generate && yarn apollo:sync:format",
"apollo:sync:format": "yarn prettier --write \"./types/generated/*.ts\" \"./graphql-schema.json\"",
"apollo:sync:remove": "yarn rimraf --glob types/generated/*.ts",
"apollo:sync:download": "yarn apollo service:download --endpoint=https://api.staging.<company>.com/graphql graphql-schema.json",
"apollo:sync:generate": "yarn apollo codegen:generate --localSchemaFile=graphql-schema.json --target=typescript --tagName=gql --outputFlat=types/generated"
},
"dependencies": {
"@apollo/client": "^3.5.10",
"@cypress/code-coverage": "^3.9.12",
"@datadog/browser-rum": "^4.20.0",
"@emotion/cache": "^11.7.1",
"@emotion/css": "^11.7.1",
"@emotion/react": "^11.4.1",
"@emotion/server": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@faker-js/faker": "^7.6.0",
"@optimizely/react-sdk": "^2.9.1",
"@radix-ui/react-popover": "^0.1.4",
"@styled-system/css": "^5.1.5",
"@types/lodash": "^4.14.176",
"@types/papaparse": "^5.3.2",
"@types/react-table": "^7.7.7",
"@types/recharts": "^1.8.24",
"@types/redux-logger": "^3.0.9",
"@types/styled-system": "^5.1.13"
"chai": "^4.3.7",
"check-code-coverage": "^1.10.4",
"classnames": "^2.3.1",
"currency.js": "^2.0.4",
"cypress": "^12.9.0",
"cypress-wait-until": "^1.7.2",
"date-fns": "^2.25.0",
"file-saver": "^2.0.5",
"formik": "^2.2.9",
"fuzzy-search": "^3.2.1",
"graphql": "14.7.0",
"handlebars": "^4.7.7",
"handlebars-helpers": "^0.10.0",
"highcharts": "^10.0.0",
"highcharts-react-official": "^3.1.0",
"immer": "^9.0.12",
"lodash": "^4.17.21",
"next": "11.1.2",
"nyc": "^15.1.0",
"papaparse": "^5.3.2",
"phosphor-react": "^1.3.1",
"react": "17.0.2",
"react-big-calendar": "^1.6.9",
"react-dom": "17.0.2",
"react-router-dom": "^6.2.2",
"react-table": "^7.7.0",
"react-tiny-popover": "^7.0.1",
"react-tracking": "^9.1.0",
"recharts": "^2.4.3",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"reselect": "^4.1.5",
"states-us": "^1.0.1",
"styled-system": "^5.1.5",
"swr": "^1.1.2",
"uuid": "^9.0.0"
},
"devDependencies": {
"@babel/core": "^7.17.5",
"@testing-library/dom": "^8.11.3",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.0",
"@testing-library/user-event": "^13.5.0",
"@tsconfig/cypress": "^1.0.0",
"@types/fuzzy-search": "^2.1.2",
"@types/graphql": "^14.5.0",
"@types/lodash": "^4.14.176",
"@types/react": "17.0.22",
"@types/react-big-calendar": "^1.6.3",
"@types/react-table": "^7.7.7",
"@types/react-tracking": "^8.1.2",
"@types/redux-logger": "^3.0.9",
"@types/styled-system": "^5.1.13",
"@types/uuid": "^8.3.4",
"@typescript-eslint/eslint-plugin": "^4.21.0",
"@typescript-eslint/parser": "^4.21.0",
"apollo": "^2.33.4",
"babel-jest": "^27.2.1",
"babel-plugin-istanbul": "^6.1.1",
"eslint": "7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-next": "11.1.2",
"eslint-config-prettier": "^8.1.0",
"eslint-import-resolver-typescript": "^2.4.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-jest": "^24.3.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-lodash": "^7.4.0",
"eslint-plugin-react": "^7.29.0",
"eslint-plugin-react-hooks": "^4",
"identity-obj-proxy": "^3.0.0",
"install-peers": "^1.0.3",
"jest": "^27.2.1",
"jest-junit": "^15.0.0",
"lint-staged": "^12.1.7",
"msw": "^0.35.0",
"next-router-mock": "^0.7.4",
"prettier": "2.6.2",
"resize-observer-polyfill": "^1.5.1",
"tsc-files": "^1.1.3",
"typed-css-modules": "^0.7.0",
"typescript": "4.4.3",
"whatwg-fetch": "^3.6.2"
},
"prettier": {
"singleQuote": true,
"trailingComma": "all"
},
"resolutions": {
"graphql": "14.7.0"
},
}
我的
import '@cypress/code-coverage/support'e2e.ts require('@cypress/code-coverage/task')(on, config);plugins/index.js首先，让我们添加必要的依赖项：
plugins/index.js
将以下行添加到您的 cypress/support/index.ts 文件中：
npm install --save-dev @cypress/code-coverage nyc babel-plugin-istanbul
将以下行添加到您的 cypress/plugins/index.ts 文件中：
import '@cypress/code-coverage/support';
通过在项目的根目录中创建一个 .babelrc 文件来配置 Babel，或者如果它已经存在则修改它：
module.exports = (on, config) => {
require('@cypress/code-coverage/task')(on, config);
// your other plugins configurations
return config;
};
通过在项目的根目录中创建一个 .nycrc 文件来配置 nyc：
{
"presets": ["next/babel"],
"plugins": [
["istanbul", {
"exclude": [
"**/*.test.ts",
"**/*.spec.ts",
"cypress/**/*"
]
}]
]
}
更新 package.json 中与 Cypress 相关的脚本：
{
"extends": "@istanbuljs/nyc-config-typescript",
"all": true,
"check-coverage": true,
"per-file": true,
"statements": 90,
"branches": 90,
"functions": 90,
"lines": 90,
"exclude": [
"cypress/**/*.ts",
"**/*.test.ts",
"**/*.spec.ts"
],
"reporter": [
"text",
"html"
],
"report-dir": "coverage/cypress"
}
使用以下命令运行 Cypress 测试：
{
"scripts": {
"cypress:open": "CYPRESS_COVERAGE=true cypress open",
"cypress:run": "CYPRESS_COVERAGE=true cypress run"
}
}
运行测试后，您应该会在 coverage/cypress 文件夹中看到生成的覆盖率报告。您可以打开该文件夹中的 index.html 文件以查看覆盖率报告。
请注意，如果您在开发模式下运行 Next.js，您可能需要在添加 Babel 配置后重新启动开发服务器。此外，请确保您正在针对应用程序的构建版本运行测试。