从Jest+CRA迁移至Vitest+Vite时，使用Mirage/Pretender出现测试错误

我刚解决过类似的迁移问题，你的报错根源其实是Vitest测试环境的全局对象配置错误，加上Mirage依赖的Pretender库对浏览器全局API的依赖导致的。下面是一步步的修复方案：

核心问题分析 #

你在vite.config.ts里把global设成了空对象{}，这直接导致Pretender（Mirage的底层依赖）找不到它需要的XMLHttpRequest.prototype等浏览器全局API，所以触发了Cannot read properties of undefined (reading 'prototype')错误。而jsdom环境下的序列化错误，也是因为全局上下文的Error构造函数没有正确挂载。

修复步骤 #

1. 修正Vite配置中的全局对象指向 #

首先修改vite.config.ts，把global指向标准的globalThis，而不是空对象：

/// <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'

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom", // 优先用jsdom，对浏览器API模拟更完整
    setupFiles: ['./src/test-setup.ts'], // 新增测试前置初始化文件
  },
  define: {
    // 关键：把global指向全局上下文globalThis
    global: 'globalThis',
  },
  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;'
      }
    })
  ],
});

2. 添加测试前置文件补全全局API #

在src目录下创建test-setup.ts，用来确保Pretender需要的全局API存在：

import { vi } from 'vitest';

// 补全Pretender依赖的XMLHttpRequest（如果环境缺失的话）
if (!globalThis.XMLHttpRequest) {
  globalThis.XMLHttpRequest = vi.fn();
}

// 修复jsdom环境下Error构造函数缺失的问题
if (!globalThis.Error) {
  globalThis.Error = window.Error;
}

3. 规范Mirage Server的生命周期管理 #

为了避免测试用例之间的污染，记得在每个测试前后创建/销毁Mirage Server：

import { describe, expect, it, beforeEach, afterEach } from "vitest"
import { createServer, Server } from "miragejs";

describe('tests', () => {
  let server: Server;

  beforeEach(() => {
    // 每个测试前创建新的Server
    server = createServer({});
  });

  afterEach(() => {
    // 测试结束后销毁Server
    server.shutdown();
  });

  it('works', () => {
    expect(true).toEqual(true)
  })
})

额外建议 #

• 优先使用jsdom环境：它对浏览器API的模拟比happy-dom更完整，能减少很多兼容性问题
• 确保MirageJS是最新版本：新版本可能已经修复了部分Vite/Vitest兼容问题

内容的提问来源于stack exchange，提问作者Jonathan Tuzman