You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi, Qwik core team member here 👋 . I'm trying to get code coverage with cypress component testing to work in Qwik.
Logs and screenshots
code-coverage combined NYC options { 'report-dir': './coverage', reporter: [ 'cobertura', 'html' ], extension: [ '.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue' ], excludeAfterRemap: false, cwd: './', extends: '@istanbuljs/nyc-config-typescript', 'check-coverage': true, include: [ 'src//*.ts', 'src//.tsx' ], exclude: [ 'cypress/**/.', '**/.d.ts', '/*.cy.tsx', '/.cy.ts' ] } +0ms
code-coverage parsed sent coverage +0ms
✓ should render ⭐ (59ms)
code-coverage parsed sent coverage +11ms
✓ should render 💣 (7ms)
code-coverage parsed sent coverage +10ms
✓ Debug coverage object (6ms)
code-coverage parsed sent coverage +86ms
✓ should count clicks (82ms)
code-coverage parsed sent coverage +227ms
code-coverage parsed sent coverage +2ms
code-coverage NYC file /Users/maieul/dev/playgrounds/qwik-coverage-repro/.nyc_output/out.json has 3 key(s) +2s
code-coverage 1 key /Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx file path /Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx +0ms
code-coverage 2 key /Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx_ExampleTest_component_2RuRrW0S9gQ.js file path /Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx_ExampleTest_component_2RuRrW0S9gQ.js +0ms
code-coverage 3 key /Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx_ExampleTest_component_Fragment_button_onClick_5dWdEYGDp1Q.js file path /Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx_ExampleTest_component_Fragment_button_onClick_5dWdEYGDp1Q.js +0ms
code-coverage in file /Users/maieul/dev/playgrounds/qwik-coverage-repro/.nyc_output/out.json all files are not found? false +0ms
code-coverage NYC file /Users/maieul/dev/playgrounds/qwik-coverage-repro/.nyc_output/out.json has 3 key(s) +0ms
code-coverage ⚠️ cannot find file /Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx_ExampleTest_component_2RuRrW0S9gQ.js with hash c07536cfa8e72df4e6409c29e9fdabb60c4c94ae +0ms
code-coverage ⚠️ cannot find file /Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx_ExampleTest_component_Fragment_button_onClick_5dWdEYGDp1Q.js with hash 9b24b9fd9bca72b8c18b94f9df735ea316dd628d +0ms
code-coverage calling NYC reporter with options { 'report-dir': '/Users/maieul/dev/playgrounds/qwik-coverage-repro/coverage', reporter: [ 'cobertura', 'html' ], extension: [ '.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue' ], excludeAfterRemap: false, cwd: './', extends: '@istanbuljs/nyc-config-typescript', 'check-coverage': true, include: [ 'src/**/.ts', 'src//*.tsx' ], exclude: [ 'cypress//.', '/*.d.ts', '/.cy.tsx', '**/.cy.ts' ], 'temp-dir': '/Users/maieul/dev/playgrounds/qwik-coverage-repro/.nyc_output', tempDir: '/Users/maieul/dev/playgrounds/qwik-coverage-repro/.nyc_output', reportDir: '/Users/maieul/dev/playgrounds/qwik-coverage-repro/coverage' } +3ms
code-coverage current working directory is /Users/maieul/dev/playgrounds/qwik-coverage-repro +1ms
code-coverage after reporting, returning the report folder name /Users/maieul/dev/playgrounds/qwik-coverage-repro/coverage +20ms
code-coverage Did not find final coverage file /Users/maieul/dev/playgrounds/qwik-coverage-repro/coverage/coverage-final.json +0ms
Versions
What is this plugin's version?
3.13.9
What is the Cypress version?
13.17.0
What is your operating system?
macOS
What is the shell?
fish
What is the Node version?
22.2
What is the NPM version?
10.7.0
How do you instrument your application?
vite-plugin-istanbul
When running tests, if you open the web application in a regular browser and open DevTools, do you see window.__coverage__ object? Can you paste a screenshot?
Is there a .nyc_output folder? Is there a .nyc_output/out.json file? Is it empty? Can you paste at least part of it so we can see the keys and file paths?
Do you run Cypress tests in a Docker container?
🙅♂️
Describe the bug
Trying to setup code coverage with Qwik + Vite + cypress component testing, I found that @cypress/code-coverage cannot handle files such as src/components/example/example.tsx_ExampleTest_component_2RuRrW0S9gQ.js which are used heavily in development with Qwik.
So when @cypress/code-coverage processes the nyc output with this file path, it creates a report that seems to know about the coverage information, but is unable to locate the original file because the constructed path is wrong.
Looking further down into the rabbit hole with the help of a fork and some console logging, it seems the problem comes down to the way fixSourcePaths returns the absolutePath if the source includes the fileName, otherwise returns the source. So when the source === "src/components/example/example.tsx", and the fileName === "example.tsx_ExampleTest_component_Fragment_button_onClick_5dWdEYGDp1Q.js", it returns the source as is, which is a relative path that can't be handled by the coverage report.
But when we look at the sourceRoot and the source itself, it seems this is all the information we need to reconstruct the absolut path needed for the coverage report.
Hi, Qwik core team member here 👋 . I'm trying to get code coverage with cypress component testing to work in Qwik.
Logs and screenshots
Versions
3.13.9
13.17.0
macOS
fish
22.2
10.7.0
vite-plugin-istanbul
window.__coverage__
object? Can you paste a screenshot?.nyc_output
folder? Is there a.nyc_output/out.json
file? Is it empty? Can you paste at least part of it so we can see the keys and file paths?package.json
(nyc
object) or in other NYC config files?🙅♂️
Describe the bug
Trying to setup code coverage with Qwik + Vite + cypress component testing, I found that @cypress/code-coverage cannot handle files such as
src/components/example/example.tsx_ExampleTest_component_2RuRrW0S9gQ.js
which are used heavily in development with Qwik.So when @cypress/code-coverage processes the nyc output with this file path, it creates a report that seems to know about the coverage information, but is unable to locate the original file because the constructed path is wrong.
Looking further down into the rabbit hole with the help of a fork and some console logging, it seems the problem comes down to the way
fixSourcePaths
returns theabsolutePath
if thesource
includes thefileName
, otherwise returns thesource
. So when thesource === "src/components/example/example.tsx"
, and thefileName === "example.tsx_ExampleTest_component_Fragment_button_onClick_5dWdEYGDp1Q.js"
, it returns thesource
as is, which is a relative path that can't be handled by the coverage report.But when we look at the
sourceRoot
and thesource
itself, it seems this is all the information we need to reconstruct the absolut path needed for the coverage report.Link to the repo
The repro contains the steps to reproduce the issue, as well as the steps to see how it behaves with a potential fix: https://github.com/maiieul/qwik-cypress-coverage-repro/
The text was updated successfully, but these errors were encountered: