幻影/Pretender会导致Vitest中的错误

Question

我正致力于从Jest迁移到Vitest (与CRA > Vite迁移一起)，我认为除了使用幻影会导致错误外，我已经让一切正常工作了。在happy-dom和“jsdom”之间设置vite配置测试环境会产生不同的错误，尽管它们似乎相关、相似或相同(只是happy-dom提供了更多有用的信息！)

我非常简单的测试：

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

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

快乐错误

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: 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;'
      }
    })
  ],
});

这个GitHub问题似乎处理相同的问题，但似乎没有解决它。

Answer 1

也碰到了同样的事情。这是global: {}语句。当我在vite.config.ts文件中注释掉它时，我的测试成功地运行了。但是，我还没有找到解决全局错误的另一种方法，这使得我首先设置了这个错误。

Answer 2

XMLHttpRequest没有提供一个实现，而pretenderjs使用它。最简单的方法是将下面的一行放在测试代码的最顶端，放在最重要的环境之前：

this.XMLHttpRequest = vi.fn()

//@vitest-environment happy-dom