Mirage/Pretender causes errors in Vitest - vite

Question

I'm working on migrating from Jest to Vitest (alongside CRA > Vite migration), and I think I've got everything working, except that using Mirage causes errors. Setting the vite config test environment between happy-dom and 'jsdom' both give different errors, though they appear to be related or similar or the same (just with happy-dom giving much more useful information!
My very simplified test:
import { describe, expect, it } from "vitest"
import { createServer } from "miragejs";
describe('tests', () => {
createServer({})
it('works', () => {
expect(true).toEqual(true)
})
})
happydom error
TypeError: Cannot read properties of undefined (reading 'prototype')
❯ interceptor node_modules/pretender/dist/pretender.js:1540:46
❯ new Pretender node_modules/pretender/dist/pretender.js:1638:32
❯ PretenderConfig._create node_modules/miragejs/dist/mirage-cjs.js:6398:14
❯ PretenderConfig.create node_modules/miragejs/dist/mirage-cjs.js:6259:27
❯ Server.config node_modules/miragejs/dist/mirage-cjs.js:6824:24
❯ new Server node_modules/miragejs/dist/mirage-cjs.js:6760:10
❯ Proxy.createServer node_modules/miragejs/dist/mirage-cjs.js:6725:10
❯ src/test.test.tsx:5:2
3|
4| describe('tests', () => {
5| createServer({})
| ^
6| it('works', () => {
7| expect(true).toEqual(true)
jsdom error
Error: Errors occurred while running tests. For more information, see serialized error.
❯ Object.runTests node_modules/vitest/dist/chunk-vite-node-externalize.6956d2d9.mjs:7048:17
❯ processTicksAndRejections node:internal/process/task_queues:96:5
❯ async file:/Users/jtuzman-superdraft/dev/superdraft-core-admin/NEW-vite-admin/node_modules/vitest/dist/chunk-vite-node-externalize.6956d2d9.mjs:10545:9
❯ Vitest.runFiles node_modules/vitest/dist/chunk-vite-node-externalize.6956d2d9.mjs:10558:12
❯ Vitest.start node_modules/vitest/dist/chunk-vite-node-externalize.6956d2d9.mjs:10479:5
❯ startVitest node_modules/vitest/dist/chunk-vite-node-externalize.6956d2d9.mjs:11204:5
❯ start node_modules/vitest/dist/cli.mjs:666:9
❯ CAC.run node_modules/vitest/dist/cli.mjs:662:3
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: {
"errors": [
[Error: Internal error: Error constructor is not present on the given global object.],
],
}
vite.config.ts
/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '#vitejs/plugin-react'
import svgrPlugin from 'vite-plugin-svgr';
import macrosPlugin from "vite-plugin-babel-macros"
import checker from 'vite-plugin-checker'
// https://vitejs.dev/config/
export default defineConfig({
test: {
globals: true,
environment: "jsdom", // or "happy-dom"
},
define: {
global: {},
},
esbuild: {
logOverride: { 'this-is-undefined-in-esm': 'silent' }
},
plugins: [
react(),
svgrPlugin({
svgrOptions: {
icon: true,
},
}),
macrosPlugin(),
checker({
typescript: true,
overlay: {
panelStyle: 'height: 100vh; max-height: unset;'
}
})
],
});
This GitHub issue appears to deal with the same question but doesn't appear to solve it.

Answer 1

Ran into the same thing. It's the global: {} statement. When I commented it out in my vite.config.ts file, my tests ran successfully. I haven't figured out another way to solve the global error yet that caused me to set that in the first place though.

Answer 2

happy-dom does not provide an implementation for XMLHttpRequest, which is used by pretenderjs. The most straightforward walk around is to put the following line at the very top of your test code, before the the vitest environment:
this.XMLHttpRequest = vi.fn()
//#vitest-environment happy-dom