how to generate code coverage against the source files instead of the bundle file

[30atm]

Hi,
Could someone please advise if code coverage can be generated for reactjs source code instead of the bundle generated by babel.

I was wondering if source maps can be used to generate code coverage

thanks

[anirudh-modi]

@emelens were you able to find any solution for this by any chance?

[nmfzone]

Bump this issue

[dword-design]

@emelens This could maybe solve the issue #64. Or this #61.

[278kunal]

This is much needed can anyone please share your thoughts here ? @bcoe

@dword-design When do you plan to merge your above changes which can enable source map support here ?

[dword-design]

@278kunal Not sure yet. The solution in the PR works for me but don't know if it works for others. What do you or others say?

[278kunal]

@dword-design I cloned your fork and tried getting coverage via Puppeteer of a locally running React application bundled via webpack. But unfortunately I am only seeing coverage for the webpack transpiled code. Is there a way we can tell PTI to look for source maps when passing to v8-to-istanbul ?

[dword-design]

@278kunal Ah yeah I guess it's because the PR only extracts source maps from webpack bundled code. I extract them from the base64. Where else could PTI find source maps?

[danvk]

Two suggestions here if you're using webpack:

• If you set devtool: 'eval-source-map' (or anything with "eval" in it) in your webpack.config.js, then you'll also get coverage data for something close to your original source files out of puppeteer.
• Instead of collecting coverage via puppeteer's page.coverage.startJSCoverage(), you can instrument your code using coverage-istanbul-loader, run it with puppeteer and then extract the coverage data (already in Istanbul format) using const coverage = await page.evaluate('window.__coverage__');

If the second option is a possibility, it works very nicely!

[a4vg]

@danvk Sorry if this is more of an Istanbul related question, I'm just starting to use it.

For the second option, after getting the coverage (from window.__coverage__) should I just dump it into a JSON file, put it into the .nyc_output folder and run nyc report --reporter=html to get Istanbul's report?

[rschoenbichler]

@a4vg could you please share some insights on how you've generated the istanbul report from the coverage once retrieved from within the page?

@danvk it seems like this solution would not allow to collect coverage data across multiple page reloads (like with page.coverage.startJSCoverage({ resetOnNavigation: false })) ?

[danvk]

@a4vg yes, put that object in a JSON file in .nyc_output. @rschoenbichler I wound up with a separate JSON coverage file for each test case, which I then merged with nyc merge. I'm not sure whether this would still work if your tests involve navigation.