Coverage report is not correct when Rollup Inject is used

[gian1200]

I'm currently migrating from Karma to Web-test-runner. When using Rollup Inject, some files get modified to include additional import lines. This additions are not taking into consideration when generating the coverage report. The result of this is that covered/uncovered lines are not correct (offset depending on the amount of lines added).

Examples

Karma (correct):

Web-test-runner:

Is this a bug, or is there any other plugin that may fix this issue?

Current plugins:

...
import rollupInject from "@rollup/plugin-inject";
import rollupLegacy from "@rollup/plugin-legacy";
import { fromRollup } from "@web/dev-server-rollup";

const inject = fromRollup(rollupInject);
const legacy = fromRollup(rollupLegacy);
...
"plugins": [
	legacy({
		"node_modules/jquery/dist/jquery.js": "$"
	}),
	inject({
		"$": "jquery",
		"fetchMock": "fetch-mock/esm/client",
		"Chart": ["chart.js/auto", "Chart"]
	})
]
...

[Westbrook]

Does inject appropriately change the source maps to track the changes? Or, put a different way, does the offset in the output directly reflect the added lines? If so, I'd question the performance of the inject plugin here.

[gian1200]

Thanks for your comment. Not sure if I got your point. Are you asking if the 2 offset lines correlate with the amount of lines added by inject? If that's the question, then yes, they match.

Regarding the source maps, where/how can I validate it? With that information maybe I can report it to @rollup/plugin-inject.

I reported it here first because the docs stated that the plugin was "tested to work correctly".

Could it also be an issue with @web/dev-server-rollup?

[Westbrook]

These plugins are tested to work correctly with Web Dev Server and there is some assumption that this also means that they work with Test Runner and all of its associated options, but clearly something was missed or changed over time. So, thanks for bringing this up!

The lines being exactly the lines added by inject implies that it will be an issue with that plugin; possibly on their end, possibly on ours. It would be good to check with them to see if their changes are passed into source map tooling that would be needed to ensure the lines match up from the actual code under test vs the source.

[gian1200]

Tip

TLDR:

I tried to build a small reproducer only with rollup. Generated source map with rollup seem to be OK.

When debugging web-test-runner in a browser, there is no inline source map or .map file next to the generated file. I don't know how to generate source maps with web-test-runner to confirm where is the issue.

---

• src/index.mjs:

$("");

• rollup.config.mjs:

import inject from '@rollup/plugin-inject';

/**
 * @type {import("rollup").RollupOptions}
 */
export default {
	input: 'src/index.mjs',
	output: {
		sourcemap: true,
		dir: 'output'
		// format: 'cjs'
	},

	plugins: [
		inject({
			"$": "jquery"
			// Promise: ['es6-promise', 'Promise']
		})
	]
};

• RUN COMMAND:

npx rollup -c

• output/index.js:

import $ from 'jquery';

$("");
//# sourceMappingURL=index.js.map

• output/index.js.map:

{
	"version": 3,
	"file": "index.js",
	"sources": [
		"../src/index.mjs"
	],
	"sourcesContent": [
		"$(\"\");"
	],
	"names": [],
	"mappings": ";;AAAA,CAAC,CAAC,EAAE,CAAC"
}

Used a source-map-visualization to validate the source map generated and got the following:

https://evanw.github.io/source-map-visualization/#MAAxODMAew0KCSJ2ZXJzaW9uIjogMywNCgkiZmlsZSI6ICJpbmRleC5qcyIsDQoJInNvdXJjZXMiOiBbDQoJCSIuLi9zcmMvaW5kZXgubWpzIg0KCV0sDQoJInNvdXJjZXNDb250ZW50IjogWw0KCQkiJChcIlwiKTsiDQoJXSwNCgkibmFtZXMiOiBbXSwNCgkibWFwcGluZ3MiOiAiOztBQUFBLENBQUMsQ0FBQyxFQUFFLENBQUMiDQp9

So it seems that inject is working as expected, right?