wxt/testing doesn't mock webextension-polyfill correctly

[aklinker1]

Describe the bug

The polyfill gets loaded into the tests, throwing an error:

$ pnpm test run

> [email protected] test /Users/aklinker1/Downloads/demo
> vitest "run"


 RUN  v1.1.0 /Users/aklinker1/Downloads/demo

 ❯ entrypoints/__tests__/background.test.ts (0)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  entrypoints/__tests__/background.test.ts [ entrypoints/__tests__/background.test.ts ]
Error: This script should only be loaded in a browser extension.
 ❯ node_modules/.pnpm/[email protected]/node_modules/webextension-polyfill/dist/browser-polyfill.js:10:9
 ❯ node_modules/.pnpm/[email protected]/node_modules/webextension-polyfill/dist/browser-polyfill.js:5:5
 ❯ Object.<anonymous> node_modules/.pnpm/[email protected]/node_modules/webextension-polyfill/dist/browser-polyfill.js:13:3

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Error: This script should only be loaded in a browser extension.
 ❯ node_modules/.pnpm/[email protected]/node_modules/webextension-polyfill/dist/browser-polyfill.js:10:9
 ❯ node_modules/.pnpm/[email protected]/node_modules/webextension-polyfill/dist/browser-polyfill.js:5:5
 ❯ Object.<anonymous> node_modules/.pnpm/[email protected]/node_modules/webextension-polyfill/dist/browser-polyfill.js:13:3
 ❯ Module._compile node:internal/modules/cjs/loader:1256:14
 ❯ Object.Module._extensions..js node:internal/modules/cjs/loader:1310:10
 ❯ Module.load node:internal/modules/cjs/loader:1119:32
 ❯ Function.Module._load node:internal/modules/cjs/loader:960:12
 ❯ ModuleWrap.<anonymous> node:internal/modules/esm/translators:169:29
 ❯ ModuleJob.run node:internal/modules/esm/module_job:194:25

This error originated in "entrypoints/__tests__/background.test.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 Test Files  1 failed (1)
      Tests  no tests
     Errors  1 error
   Start at  14:38:47
   Duration  178ms (transform 19ms, setup 0ms, collect 0ms, tests 0ms, environment 0ms, prepare 48ms)

 ELIFECYCLE  Test failed. See above for more details.

To get the tests to pass, just add

  ssr: {
    noExternal: ["wxt"],
  },

to the vitest.config.ts file.

To Reproduce

Example Project.zip

1. pnpm i
2. pnpm test

Expected behavior

Tests should pass.

Additional Context

Discovered while working on #269. Not sure why it works in the monorepo, but this fails in a different repo.

[aklinker1]

Still not sure why the current solution is working in the wxt monorepo and not in real projects...

But I have a solution. For some background: To mock webextension-polyfill, Vite needs to process the JS file that imports it. To process the JS file, it needs to be marked as "inline" (or non-external). The current solution of setting test.server.deps.inline: ["wxt/browser"] does not work.

wxt/src/core/builders/vite/plugins/webextensionPolyfillInlineDeps.ts

Lines 12 to 21 in 7fd5752

	const wxtModules = ['wxt/browser'];
	return {
	test: {
	server: {
	deps: {
	inline: [...wxtModules],
	},
	},
	},
	};

Once again, no idea if this was working at some point because of an older version of Vite or what, but it doesn't work anymore.

It doesn't work because vite-node, which this option is passed into, doesn't know what package.json import paths are. It marks modules as internal or external based on file paths.

So the quick fix is to use "wxt/dist/browser.js" instead of "wxt/browser", which vite-node will recognize as matching the wxt/browser module, and properly inline the module!

Another solution is to use ssr.noExternal: ["wxt"] to mark wxt and wxt/* as inline modules. This option works with modules names, like wxt, instead of file paths, so it's a little cleaner and easier to understand.

Both these solutions work with both the "node" and "happy-dom" environments, the "jsdom" environment throws this error.

So I'm going to go with ssr.noExternal: ["wxt"] since it's simpler and easier to understand.

[aklinker1]

Released in v0.12.3