fixing or ignoring code coverage on typescript and why it's helpful Cypress Community #i-need-help

fixing or ignoring code coverage on typescript and...

busy-agency-3812

04/14/2023, 8:39 PM

I am trying to fix or ignore code coverage errors I've had in my cypress window for a long time:

Copy code

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]

Following these steps (https://docs.cypress.io/guides/tooling/code-coverage#E2E-code-coverage.) don't work for me because we're on version 12 and I think the issue is that plugins/index.js is no longer supported: https://docs.cypress.io/api/plugins/writing-a-plugin. I don't see instructions on instrumenting code coverage with cypress in typescript anywhere in the official docs We are already using jest code coverage with --coverage and it generates lcov. I'm not sure to be honest what the value of @cypress/code-coverage is and whether we can just ignore it. I do not want the warning to show up in my cypress window either way. I tried this even though we're using E2E and not component testing, no luck: https://glebbahmutov.com/blog/component-code-coverage/ also https://github.com/bahmutov/cra-ts-code-coverage-example Does anyone have any suggestions? Happy to follow up w/ questions about my package.json or anything. Babel is in my project already.

gray-kilobyte-89541

04/15/2023, 11:46 AM

Well, I have the 100% code coverage working in the demo CRA app working in https://cypress.tips/courses/swag-store

busy-agency-3812

04/15/2023, 10:15 PM

I bought your course and started on the Bonus 01 section but I notice the demo cra app is using a project where the scripts are different. We're using yarn and nextJS with node v 16, so if I modify my start script it would be like this:

"start-16": "next -r @cypress/instrument-cra start",

and then when i run

yarn build

and

yarn start-16

I get this:

Copy code

yarn start-16
yarn run v1.22.19
warning ../package.json: No license field
> No such directory exists as the project root: /Users/julielaursen/Workspace/company-app/next/@cypress/instrument-cra
error Command failed with exit code 1.

Will instrument-cra work with a Next project? My fear is that the instrumentation needs to work with a regular create-react project with a source directory and our repo is neither

gray-kilobyte-89541

04/17/2023, 2:13 AM

yeah, instrument cra won't work with Next. But I did instrument Next js before, find my blog post from https://cypress.tips/search

https://cdn.discordapp.com/attachments/1096535335309168710/1097344023322173550/Screenshot_2023-04-16_at_22.12.55.png▾

busy-agency-3812

04/17/2023, 3:10 PM

So when I go through your steps here(https://glebbahmutov.com/blog/code-coverage-for-nextjs-app/#cypress-tests-with-code-coverage-report), I see

window.__coverage__

in the dev console for the app, but when I run cypress I get this error and I really don't understand it. I've tried to mimick other repos like

GitHub - lluia/cypress-typescript-coverage-example

and I saw that same error again. It seems like this error happens any time it attempts to correctly get coverage. It also causes my Cypress tests to fail. My project is using typescript. We are not using vercel. ``` 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 (http://e2etest.dev.updater.com:8081/__cypress/runner/cypress_runner.js:98568:11)at $Cypress.minimatch (http://e2etest.dev.updater.com:8081/__cypress/runner/cypress_runner.js:98407:3)at (http://e2etest.dev.updater.com:8081/__cypress/runner/cypress_runner.js:35752:37)at (http://e2etest.dev.updater.com:8081/__cypress/runner/cypress_runner.js:38750:16)at basePickBy (http://e2etest.dev.updater.com:8081/__cypress/runner/cypress_runner.js:28917:13)at pickBy

busy-agency-3812

04/17/2023, 3:16 PM

I'm in a nested mono repo with the structure /app and /app/next. The relevant app is in /app/next Here is my .babelrc. It might be a typescript file because I cannot set a const in it like your example

Copy code

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "useBuiltIns": "usage",
          "corejs": 3
        }
      }
    ]
  ],
  "plugins": [
    "@emotion/babel-plugin",
    "istanbul"
  ]
}

busy-agency-3812

04/17/2023, 3:20 PM

I have

require('@cypress/code-coverage/task')(on, config);

in my index.js (although I thought the plugins/index.js file may be obsolete in cypress v12)

busy-agency-3812

04/17/2023, 3:20 PM

And I have

import '@cypress/code-coverage/support';1

in e2e.ts

busy-agency-3812

04/17/2023, 3:40 PM

Well, now I seem to be getting this:

Copy code

logSaving code coverage for /company/n/sign-in [@cypress/code-coverage]
2
logSaving code coverage for /company/n/v2 [@cypress/code-coverage]
3
logSaving code coverage for /company/n/v2/residents [@cypress/code-coverage]

I don't think I changed anything. I still see

undefined

returned in my cypress window if i type

window.__coverage__

. And I have an index.html in my coverage folder, but I already had that with jest working. So maybe this is all good?

busy-agency-3812

04/17/2023, 7:00 PM

I briefly had it working but seem to have lost everything when I tried to do cleanup and move dependencies back into dev dependencies. Now I'm back at square one, no error but not generating coverage, also no longer seeing

window.__coverage__

in my app. I created new branches and tried re-installing the babel plugin and cypress/code-coverage package several times with no luck.

9 Views

Previous Next