Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Coverage report is not correct when Rollup Inject is used #2778

Open
gian1200 opened this issue Aug 9, 2024 · 4 comments
Open

Coverage report is not correct when Rollup Inject is used #2778

gian1200 opened this issue Aug 9, 2024 · 4 comments

Comments

@gian1200
Copy link

gian1200 commented Aug 9, 2024

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):

image

Web-test-runner:

image

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
Copy link
Member

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
Copy link
Author

gian1200 commented Aug 15, 2024

Thanks for your comment. No 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
Copy link
Member

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
Copy link
Author

gian1200 commented Aug 20, 2024

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.


image

  • 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:

image

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants