Code coverage with "all" option does not report uncovered source code

[xiamingwei]

System info

● Playwright Version: [v1.31.2]
● Operating System: [macOS 12.0.1 MacBook Pro M1.]
● Browser: [Chromium]
● Other info: i am using the official recommended code coverage instrumentation library, playwright-test-coverage you can see it in (microsoft/playwright#7030)

Source code
(https://github.com/xiamingwei/umi-e2e-test/blob/main/e2e/index.spec.ts)
I will provide a minimal repository to reproduce this issue

Steps
tnpm i
tnpm run e2e
npx nyc --all report --reporter=html --reporter=json-summary --reporter=json

Expected
in the index.html file located in the generated coverage folder，All files in the application should be displayed, but only the files covered by the test cases are shown. because i also have other modules like Home.tsx,Detail.tsx etc...


Actual

In fact, only the files mentioned in the test cases are displayed,this will cause a phenomenon that when I add test cases for other pages, the new test cases will also be included in the coverage report, leading to a decrease in the original coverage rate.

[VendenIX]

You forget some configurations I think, look at mine: https://stackoverflow.com/questions/76588140/error-coverage-for-lines-0-does-not-meet-global-threshold-90-cypress

[xiamingwei]

You forget some configurations I think, look at mine: https://stackoverflow.com/questions/76588140/error-coverage-for-lines-0-does-not-meet-global-threshold-90-cypress

Thank you for your reply. Later, I found the reason was due to the issue of lazy loading of routes, which resulted in some modules that were not loaded not being included in the coverage results. Are you saying that Playwright or nyc have corresponding configurations to solve this problem? I saw your post was based on Cypress, and I'm not sure if there is a similar issue with Cypress.

[VendenIX]

Okay interesting, yeah I have a different configuration of nyc for Cypress.

[radixdt2501]

Do you have nyc config to use lazy loading routes? @mxschmitt @VendenIX
in React I am also not able to track them with playwright nyc config.

[VendenIX]

Unfortunately, there's no specific NYC configuration option that directly addresses lazy loading of routes. However, a useful approach is to leverage hooks or specific events from your routing library or framework to trigger the loading of lazy components before running coverage tests. This technique depends on the routing library you're using, such as React Router.

Additionally, ensure all your code, including lazy-loaded components, is instrumented. This may involve manually instrumenting your source directory and serving this instrumented version during tests. Also, make sure your tests cover all parts of your application, including routes that use lazy loading, to ensure these parts are executed and included in the coverage report.

Remember, the key is ensuring that every component, lazy-loaded or not, is instrumented and executed during the testing process. This should help include lazy-loaded routes in your coverage reports.

[jtgober]

#26 (comment)