Nx: Cypress code coverage report

[pzvalueadd]

Is it possible to generate Cypress code coverage report? I'm trying to set it up, but so far without success.

[Flaxline]

Did you make any progress on this?
I'm also trying to setup code coverage for a nx-repo with Angular, where it seems my 2 biggest problems are Angular/TS and the structure of the repository.
My goal would be to have the coverage for e2e-Tests against a Storybook, as they're now supported and generated by nx.

I've tried a lot of different setups with manual instrumentation of the code, and my, I think, best result so far was:

• e2e-Tests against the application
• the application manually built (not a prod-build), instrumented with nyc and started separately to the tests
• I had instrumented code and ran tests against it, but the report generation task (by cypress coverage plugin) failed. Could be due to missing source-mapping

As also noted before, my biggest problems seem to be

• I'm using Typescript and I need the code to be instrumented after transpilation, but before execution.
• I'm using the NX-Repo structure, EVERY sample, working or not, uses a global /cypress-Folder. So I assume https://github.com/cypress-io/code-coverage/issues/18 is also a huge problem there.

I plan to try to set up a global /cypress-Folder and configuring the code-coverage there, to see if at least my second assumption is correct. But I find it very hard to get resources on this topic, and on top most of them relating to react.

TL;DR:
Also trying, not being overly successful. Would appreciate some help, too.

[pzvalueadd]

Unfortunately I didn't make any progress so far :(

[Flaxline]

I finally figured out what I was doing wrong applying the steps from https://github.com/skylock/cypress-angular-coverage-example
Basically, if you are also using angular, you can follow that, but have to be very careful about the paths, especially in the webpack config.

https://github.com/Flaxline/angular-nx-cypress-coverage-example now sums up what I've done, so if you're using angular you should be good to go with that. And based on those experiences, React should also be do-able based on the examples of the plugin.

[FERNman]

As I've very recently configured our project to generate cypress code-coverage reports and the example from @Flaxline didn't work for me, I thought I'd share the process here.

Basically, https://github.com/skylock/cypress-angular-coverage-example did the job.

This will generate the coverage report in apps/*-e2e/coverage. If you want the report to be generated in the global coverage folder in the root of your repository instead (following the same convention as with unit tests), you have to add a package.json (at least until cypress-io/code-coverage#93 is implemented and additional config files are supported) containing at least the following:

{
  ...
  "nyc": {
    "report-dir": "../../coverage/apps/<app_name>-e2e"
  },
  ...
}

This will generate the coverage in /coverage/app-e2e/<app_name>-e2e.

[masonembry]

Does anyone have any insight into how to setup coverage in an nx React app? I'd very much appreciate any guidance someone may have.