wxt The jsdom environment throws an error when using the WxtVitest plugin in vitest

Describe the bug

The jsdom environment throws an error when using the WxtVitest plugin in vitest

Reproduction

https://github.com/uxuip/wxt-jsdom-bug-report

Steps to reproduce

Initialize the project and select the vanilla template

pnpm dlx wxt@latest init

Installation of test-related libraries

pnpm i vitest jsdom -D

Create the vitest.config.ts file and write the code:

import { defineConfig } from 'vitest/config'
import { WxtVitest } from 'wxt/testing'

export default defineConfig({
  plugins: [
    WxtVitest(),
  ]
})

Create the jsdom.test.ts file and write the code:

// @vitest-environment jsdom

import { it } from 'vitest';

it('test', () => {})

Then run the command:

pnpm vitest --run

will get the following error:

 RUN  v3.1.1 D:/Workspace/Playgrounds/wxt-jsdom-bug-report


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

 FAIL  jsdom.test.ts [ jsdom.test.ts ]
Error: Invariant violation: "new TextEncoder().encode("") instanceof Uint8Array" is incorrectly false

This indicates that your JavaScript environment is broken. You cannot use
esbuild in this environment because esbuild relies on this invariant. This
is not a problem with esbuild. You need to fix your environment instead.

 ❯ Object.<anonymous> node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:201:9

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[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: Invariant violation: "new TextEncoder().encode("") instanceof Uint8Array" is incorrectly false

This indicates that your JavaScript environment is broken. You cannot use
esbuild in this environment because esbuild relies on this invariant. This
is not a problem with esbuild. You need to fix your environment instead.

 ❯ Object.<anonymous> node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:201:9
 ❯ Module._compile node:internal/modules/cjs/loader:1364:14
 ❯ Object.Module._extensions..js node:internal/modules/cjs/loader:1422:10
 ❯ Module.load node:internal/modules/cjs/loader:1203:32
 ❯ Function.Module._load node:internal/modules/cjs/loader:1019:12
 ❯ ModuleWrap.<anonymous> node:internal/modules/esm/translators:203:29
 ❯ ModuleJob.run node:internal/modules/esm/module_job:195:25
 ❯ ModuleLoader.import node:internal/modules/esm/loader:337:24
 ❯ VitestExecutor.interopedImport node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite-node/dist/client.mjs:365:26
 ❯ VitestExecutor.directRequest node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite-node/dist/client.mjs:235:20

This error originated in "jsdom.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  18:07:32
   Duration  2.19s (transform 135ms, setup 0ms, collect 0ms, tests 0ms, environment 559ms, prepare 104ms)

If the WxtVitest plugin is commented out, the test will pass:

import { defineConfig } from 'vitest/config'
import { WxtVitest } from 'wxt/testing'

export default defineConfig({
  plugins: [
    // WxtVitest(),
  ]
})

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700F
    Memory: 39.65 GB / 63.86 GB
  Binaries:
    Node: 18.20.8 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.8.0 - ~\AppData\Roaming\nvm\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (133.0.3065.59)
  npmPackages:
    wxt: ^0.20.0 => 0.20.0

Used Package Manager

pnpm

Validations

[x] Read the Contributing Guidelines.
[x] Read the docs.
[x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[x] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[x] The provided reproduction is a minimal reproducible example of the bug.

Apr 14 '25 10:04 uxuip

I've never found a solution or cause for this... I always just use happy-dom instead.

Apr 14 '25 22:04 aklinker1

I've never found a solution or cause for this... I always just use happy-dom instead.

Yes, me too, but unfortunately I encountered a bug when using happy-dom. https://github.com/capricorn86/happy-dom/issues/1803

Apr 15 '25 03:04 uxuip

It has to be something in WxtVitest 🤔 I just tried a basic vitest + react testing library + jsdom it works:

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import { WxtVitest } from 'wxt/testing';
import path from 'path';

export default defineConfig({
    test: {
        mockReset: true,
        environment: 'jsdom',
        setupFiles: './test/setup.ts',
        globals: true,
    },
});

but the moment I add WxtVitest it breaks with

Error: Invariant violation: "new TextEncoder().encode("") instanceof Uint8Array" is incorrectly fals
│ e
│ 
│ This indicates that your JavaScript environment is broken. You cannot use
│ esbuild in this environment because esbuild relies on this invariant. This
│ is not a problem with esbuild. You need to fix your environment instead.
│ 
│  ❯ Object.<anonymous> ../../node_modules/esbuild/lib/main.js:201:9
│     199| }
│     200| if (!(encodeUTF8("") instanceof Uint8Array))
│     201|   throw new Error(`Invariant violation: "${encodeInvariant} instanceof Uint8Array" is inco…
│        |         ^
│     202| 
│     203| This indicates that your JavaScript environment is broken. You cannot use

Aug 11 '25 23:08 marcellino-ornelas