istanbuljs/nyc

Source Map issues with Browserify and Webpack

Open

#1130 opened on Jun 18, 2019

View on GitHub
 (5 comments) (0 reactions) (0 assignees)JavaScript (5,468 stars) (392 forks)batch import
bughelp wantedpinned

Description

Link to bug demonstration repository

agilgur5/physijs-webpack#coverage Relevant files are browserify.js and webpack.js as well as their respective tests browserify.spec.js and webpack.spec.js which are all like 5-10 LoC each. package.json scripts and nyc.config.js for config. (vendored files are physi.js, physijs_worker.js, and vendor/ammo.js, which are mostly ignorable)

For context, my library is an integration for bundlers, including out-of-the-box support for webpack and browserify, so my tests are literally to ensure that the integration itself works (and not that physijs works). An important aspect of this is WebWorker support for both bundlers. This means that I have to test the bundled code, and not the source files themselves. The source code is all ES5, so no transpilation needed (though the test code is not necessarily). The code can be bundled for both bundlers with npm run build: test.

It seemed like nyc's source map support would handle this use case, but I ran into some issues with both bundlers.

Expected Behavior

  1. I expect the output of npx nyc ava browserify.spec.js to be:
-----------------------------|----------|----------|----------|----------|-------------------|
File                         |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------------------------|----------|----------|----------|----------|-------------------|
All files                    |    100  |     100 |     100 |    100 |                   |
 browserify:                 |    100  |     100 |     100 |   100  |                   |
  browserify.js              |     100 |     100 |     100 |    100 |                   |
 ----------------------------|----------|----------|----------|----------|-------------------|
  1. I expect the output of npx nyc ava webpack.spec.js to be:
-----------------------------|----------|----------|----------|----------|-------------------|
File                         |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------------------------|----------|----------|----------|----------|-------------------|
All files                    |    100  |     100 |     100 |    100 |                   |
 webpack:                    |    100  |     100 |     100 |   100  |                   |
  webpack.js                 |     100 |     100 |     100 |    100 |                   |
 ----------------------------|----------|----------|----------|----------|-------------------|

Observed Behavior

There are 2 different, but potentially related bugs, I'm encountering:

  1. For browserify, I have source maps output to a separate .map file with exorcist, but none of the bundle itself or the source code ends up being output in the coverage. The output of npx nyc ava browserify.spec.js is:
----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|

I don't really know why the code in build/ and the source mapped code isn't included. The file I'm looking to be included without source maps is browserify.bundle.js and with source maps the files are browserify.js (and maybe physijs_worker.js and/or physi.js for further testing). Why are those not included?

  1. For webpack, which runs virtually identical code (just a different bundler and worker-loader instead of webworkify), the output does cover webpack.bundle.js and the source mapped files, webpack.js, physi.js, and physijs_worker.js are shown in the coverage report. The output of npx nyc ava webpack.spec.js is:
-----------------------------|----------|----------|----------|----------|-------------------|
File                         |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------------------------|----------|----------|----------|----------|-------------------|
All files                    |    23.64 |     3.46 |     8.51 |    23.82 |                   |
 webpack:                    |    23.42 |     3.46 |     8.51 |    23.59 |                   |
  physi.js                   |    22.73 |     3.46 |     7.53 |     22.9 |... 1394,1395,1396 |
  physijs_worker.js          |      100 |      100 |      100 |      100 |                   |
  webpack.js                 |      100 |      100 |      100 |      100 |                   |
 webpack:/test-utils/webpack |      100 |      100 |      100 |      100 |                   |
  _export-to-window.js       |      100 |      100 |      100 |      100 |                   |
-----------------------------|----------|----------|----------|----------|-------------------|

The exclude is set to ignore test-utils/**, physi.js, and physijs_worker.js, but they still show up in the reported coverage through the source maps. (I'm also pretty sure the 100% coverage of physijs_worker.js is incorrect, but that's probably unrelated?). The code in test-utils that's imported directly (not source mapped) is correctly excluded/hidden, but the source mapped code is incorrectly shown. How do I exclude/hide these source mapped files?

There doesn't seem to be much documentation for testing source-mapped bundles. nyc seems to try to handle it automatically and there is the babel preset for babel instrumentation, but I'm not transpiling any code, just bundling it. I also have both webpack and browserify set to output source maps to a separate .map file, but I'm not sure if that's necessary. The README says inline source maps are supported, but using cheap-eval-source-map for webpack causes the source maps to not work EDIT: it should be inline-cheap-source-map, woops.

Troubleshooting steps

  • still occurring when I put cache: false in my nyc config

Environment Information

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
    Memory: 64.03 MB / 8.00 GB
  Binaries:
    Node: 8.4.0 - /usr/local/bin/node
    npm: 6.9.0 - /usr/local/bin/npm
  npmPackages:
    nyc: ^14.1.1 => 14.1.1

Contributor guide