cypress-io / cypress-io/code-coverage

[🐞] fixSourcePaths doesn't handle paths that are suffixed with more information even though the sources and sourceRoot are correct

Open
#919 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
445
Forks
115
PR merge metrics
No merged PRs in 30d

Description

Hi, [Qwik](https://github.com/QwikDev/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?
![image](https://github.com/user-attachments/assets/2a819cb9-6e2b-468e-8ebe-6060e41b24a3)
- 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?
```
{
"/Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx": {
"path": "/Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx",
"statementMap": {
"0": {
"start": {
"line": 3,
"column": 41
},
"end": {
"line": 8,
"column": 3
}
},
"1": {
"start": {
"line": 3,
"column": 79
},
"end": {
"line": 3,
"column": 139
}
}
},
"fnMap": {
"0": {
"name": "(anonymous_0)",
"decl": {
"start": {
"line": 3,
"column": 75
},
"end": {
"line": 3,
"column": 76
}
},
"loc": {
"start": {
"line": 3,
"column": 79
},
"end": {
"line": 3,
"column": 139
}
},
"line": 3
}
},
"branchMap": {},
"s": {
"0": 6,
"1": 6
},
"f": {
"0": 6
},
"b": {},
"inputSourceMap": {
"version": 3,
"sources": [
"/Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx"
],
"sourceRoot": "",
"names": [],
"mappings": ";;AAEA,OAAO,MAAM,4BAAc;;;;;IA4BxB"
},
"_coverageSchema": "1a1c01bbd47fc00a2c39e90264f33305004495a9",
"hash": "f576f1a7906855f86a9c6a9a78b4ba3c6d66eb6c"
},
"/Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx_ExampleTest_component_2RuRrW0S9gQ.js": {
"path": "/Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx_ExampleTest_component_2RuRrW0S9gQ.js",
"statementMap": {
"0": {
"start": {
"line": 7,
"column": 49
},
"end": {
"line": 60,
"column": 1
}
},
"1": {
"start": {
"line": 8,
"column": 18
},
"end": {
"line": 10,
"column": 6
}
},
"2": {
"start": {
"line": 11,
"column": 27
},
"end": {
"line": 15,
"column": 5
}
},
"3": {
"start": {
"line": 12,
"column": 8
},
"end": {
"line": 14,
"column": 30
}
},
"4": {
"start": {
"line": 12,
"column": 33
},
"end": {
"line": 12,
"column": 50
}
},
"5": {
"start": {
"line": 13,
"column": 13
},
"end": {
"line": 14,
"column": 30
}
},
"6": {
"start": {
"line": 13,
"column": 38
},
"end": {
"line": 13,
"column": 54
}
},
"7": {
"start": {
"line": 14,
"column": 13
},
"end": {
"line": 14,
"column": 30
}
},
"8": {
"start": {
"line": 16,
"column": 19
},
"end": {
"line": 16,
"column": 35
}
},
"9": {
"start": {
"line": 17,
"column": 4
},
"end": {
"line": 59,
"column": 7
}
},
"10": {
"start": {
"line": 32,
"column": 28
},
"end": {
"line": 32,
"column": 48
}
},
"11": {
"start": {
"line": 42,
"column": 47
},
"end": {
"line": 42,
"column": 131
}
}
},
"fnMap": {
"0": {
"name": "(anonymous_0)",
"decl": {
"start": {
"line": 7,
"column": 49
},
"end": {
"line": 7,
"column": 50
}
},
"loc": {
"start": {
"line": 7,
"column": 58
},
"end": {
"line": 60,
"column": 1
}
},
"line": 7
},
"1": {
"name": "(anonymous_1)",
"decl": {
"start": {
"line": 11,
"column": 27
},
"end": {
"line": 11,
"column": 28
}
},
"loc": {
"start": {
"line": 11,
"column": 31
},
"end": {
"line": 15,
"column": 5
}
},
"line": 11
},
"2": {
"name": "(anonymous_2)",
"decl": {
"start": {
"line": 32,
"column": 22
},
"end": {
"line": 32,
"column": 23
}
},
"loc": {
"start": {
"line": 32,
"column": 28
},
"end": {
"line": 32,
"column": 48
}
},
"line": 32
},
"3": {
"name": "(anonymous_3)",
"decl": {
"start": {
"line": 42,
"column": 43
},
"end": {
"line": 42,
"column": 44
}
},
"loc": {
"start": {
"line": 42,
"column": 47
},
"end": {
"line": 42,
"column": 131
}
},
"line": 42
}
},
"branchMap": {
"0": {
"loc": {
"start": {
"line": 12,
"column": 8
},
"end": {
"line": 14,
"column": 30
}
},
"type": "if",
"locations": [
{
"start": {
"line": 12,
"column": 8
},
"end": {
"line": 14,
"column": 30
}
},
{
"start": {
"line": 13,
"column": 13
},
"end": {
"line": 14,
"column": 30
}
}
],
"line": 12
},
"1": {
"loc": {
"start": {
"line": 13,
"column": 13
},
"end": {
"line": 14,
"column": 30
}
},
"type": "if",
"locations": [
{
"start": {
"line": 13,
"column": 13
},
"end": {
"line": 14,
"column": 30
}
},
{
"start": {
"line": 14,
"column": 13
},
"end": {
"line": 14,
"column": 30
}
}
],
"line": 13
},
"2": {
"loc": {
"start": {
"line": 32,
"column": 28
},
"end": {
"line": 32,
"column": 48
}
},
"type": "cond-expr",
"locations": [
{
"start": {
"line": 32,
"column": 38
},
"end": {
"line": 32,
"column": 41
}
},
{
"start": {
"line": 32,
"column": 44
},
"end": {
"line": 32,
"column": 48
}
}
],
"line": 32
}
},
"s": {
"0": 6,
"1": 25,
"2": 25,
"3": 25,
"4": 5,
"5": 20,
"6": 2,
"7": 18,
"8": 25,
"9": 25,
"10": 25,
"11": 5
},
"f": {
"0": 25,
"1": 25,
"2": 25,
"3": 5
},
"b": {
"0": [
5,
20
],
"1": [
2,
18
],
"2": [
20,
5
]
},
"inputSourceMap": {
"version": 3,
"sources": [
"src/components/example/example.tsx"
],
"sourceRoot": "",
"names": [],
"mappings": ";;;;;;iDAEsC,CAAC;IACrC,MAAM,QAAQ,SAAS;QACrB,SAAS;IACX;IAEA,MAAM,iBAAiB;QACrB,IAAI,MAAM,OAAO,KAAK,GACpB,OAAO;aACF,IAAI,MAAM,OAAO,KAAK,GAC3B,OAAO;aAEP,OAAO;IAEX;IAEA,MAAM,SAAS;IAEf,qBACE;sBACE,WAAC;YAAK;sBACG;YAAc;YAAE;;;;;;sBAEzB,WAAC;YAAI,OAAM;;YAAO;4BAAO,GAAM,IAAI,GAAG,MAAM;;;;;;;;sBAC5C,WAAC;YAAO,OAAM;YAAc,QAAQ;;;;;;;;WAAyB;;;;;;;;;;AAKnE"
},
"_coverageSchema": "1a1c01bbd47fc00a2c39e90264f33305004495a9",
"hash": "c07536cfa8e72df4e6409c29e9fdabb60c4c94ae"
},
"/Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx_ExampleTest_component_Fragment_button_onClick_5dWdEYGDp1Q.js": {
"path": "/Users/maieul/dev/playgrounds/qwik-coverage-repro/src/components/example/example.tsx_ExampleTest_component_Fragment_button_onClick_5dWdEYGDp1Q.js",
"statementMap": {
"0": {
"start": {
"line": 2,
"column": 73
},
"end": {
"line": 5,
"column": 1
}
},
"1": {
"start": {
"line": 3,
"column": 20
},
"end": {
"line": 3,
"column": 37
}
},
"2": {
"start": {
"line": 4,
"column": 4
},
"end": {
"line": 4,
"column": 27
}
}
},
"fnMap": {
"0": {
"name": "(anonymous_0)",
"decl": {
"start": {
"line": 2,
"column": 73
},
"end": {
"line": 2,
"column": 74
}
},
"loc": {
"start": {
"line": 2,
"column": 77
},
"end": {
"line": 5,
"column": 1
}
},
"line": 2
}
},
"branchMap": {},
"s": {
"0": 3,
"1": 9,
"2": 9
},
"f": {
"0": 9
},
"b": {},
"inputSourceMap": {
"version": 3,
"sources": [
"src/components/example/example.tsx"
],
"sourceRoot": "",
"names": [],
"mappings": ";yEAyB4C;;WAAM,MAAM,OAAO"
},
"_coverageSchema": "1a1c01bbd47fc00a2c39e90264f33305004495a9",
"hash": "9b24b9fd9bca72b8c18b94f9df735ea316dd628d"
}
}
```
- Do you have any custom NYC settings in `package.json` (`nyc` object) or in other [NYC config files](https://github.com/istanbuljs/nyc#configuration-files)?
```
{
"cwd": "./",
"extends": "@istanbuljs/nyc-config-typescript",
"check-coverage": true,
"include": ["src/**/*.ts", "src/**/*.tsx"],
"exclude": ["cypress/**/*.*", "**/*.d.ts", "**/*.cy.tsx", "**/*.cy.ts"]
}
```
- 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.
![image](https://github.com/user-attachments/assets/f7dd57a7-f49f-4d11-bde5-22fa276b16ee)

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.
![image](https://github.com/user-attachments/assets/0c26fbd4-b260-447d-b2d7-f9e085a8ea37)

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.

**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/

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.