Mirage/Pretender 在 Vitest 中导致错误答案

【问题标题】：Mirage/Pretender causes errors in VitestMirage/Pretender 在 Vitest 中导致错误
【发布时间】：2022-08-20 11:37:08
【问题描述】：

我正在从 Jest 迁移到 Vitest（与 CRA > Vite 迁移一起），我认为我已经完成了所有工作，除了使用 Mirage 会导致错误。在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;\'
      }
    })
  ],
});

This GitHub issue 似乎处理了同样的问题，但似乎没有解决它。

标签： vite vitest miragejs pretender.js

【解决方案1】：

遇到同样的事情。这是global: {} 声明。当我在我的 vite.config.ts 文件中注释掉它时，我的测试运行成功。我还没有想出另一种解决全局错误的方法，但这导致我首先设置它。

【讨论】：

【解决方案2】：

happy-dom 没有提供 XMLHttpRequest 的实现，它是由predicterjs 使用的。最直接的做法是将以下行放在测试代码的最顶部，在 vitest 环境之前：

this.XMLHttpRequest = vi.fn()

//@vitest-environment happy-dom

【讨论】：