I've been trying to instrument coverage on a NextJS typescript project using Cypress v12, but the official docs seem to be for javascript an Cypress version < 10. I cannot seem to get anything back when I type window.__coverage__ or __coverage__ in the console and I was originally getting this error that code-coverage was not set up (because I haven't instrumented it):
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]
I already have jest running with lcov and have been using that for my unit tests. Babel has also been installed before Cypress. The instrument-cra package won't work on a Next.js project
Consistent throughout several articles are that I need:
- babel installed and .babelrc configured
- cypress.config.ts modified
- nyc installed and possibly .nycrc.json configured OR @babel-plugin-instabul installed
- @cypress/code-coverage installed
- Some index/e2e files in /support edited
It looks like I may possibly need:
- An API imported and referenced
I've tried to instrument coverage in many ways on a dozen or so branches and they're blurring together for me (I'm using the example repos referenced in the cypress docs). Sometimes I seem to be able to make progress but then I get this error:
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
I am also confused why and whether I need instrumentation on a project that jest is already in, and if I need to specifically use babel-plugin-istanbul over nyc which is built into jest, how does this work? Ot doesn't seem to be doing anything when I add it to my package.json and my .babelrc. What exactly do I need to do to get window.__coverage__ to return anything outside of installing these packages?
My package.json at the start of the project before adding packages:
{
"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"
},
}
I also have import '@cypress/code-coverage/support' on e2e.ts and require('@cypress/code-coverage/task')(on, config); in my plugins/index.js although my plugins/index.js shouldn't be used as it's v12
No comments:
Post a Comment