I'm quite new to Jest as part of my tooling and I've encountered a problem I cannot seem to solve nor find previous answers online, so I ask for your help.
I've configured Jest to output coverage as html with the following config:
module.exports = {
preset: 'ts-jest',
globals: {
'ts-jest': {
tsconfig: 'tsconfig.json',
importHelpers: true
}
},
coverageReporters: ['text', 'html'],
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: -10
}
}
};
and then run jest as:
jest --coverage
Then serve my output from ./coverage
folder with a static serve
with serves in my localhost
.
I then see a really nice report with contains a table for each folder/file in my src code, that I can navigate by clicking on the names of the folders. The problem arises when in the report a file appears, and you attempt to click it, as the link is broken.
Let's say I have the following structure
src
|- folder
| |- infolder.ts
|- main.ts
Then the links to the files lead to:
- http://localhost/main.ts
- http://localhost/src/infolder.ts
When they should be link to:
- http://localhost/src/main.ts
- http://localhost/src/folder/infolder.ts
If I enter the previously mentioned addresses manually, I get to see the file and the line by line coverage report for the file, but I cannot seem to make the links to output correctly.
What baffles me the most, is that it's not the src
folder that is missing from the path, but always the last folder before the filename.
If I get the HTML, standing in http://localhost/src
for example, the link is <a href="main.ts.html">main.ts</a>
, so the current folder name part seems to be missing, but it should not care, because at this point, in the generated HTML sctructe, the file main.ts.html
is sitting right there in the same folder as this index.html
file.
This is probably a misconfiguration of my part or something, but any help will be gladly appreciated.
question from:
https://stackoverflow.com/questions/65944976/why-is-my-jest-html-coverage-report-outputs-broken-links