Vue3 的 Vue 测试实用程序：文档未定义

Question

我尝试根据以下内容引导一个简单的应用程序Vue3，，ViteVitest

\n

我还安装了 vue 3 兼容版本的vue test utils来测试 vue 组件。

\n

我在尝试复制文档中的基本示例时遇到错误：

\n

import { mount } from "@vue/test-utils";\nimport { expect, test } from \'vitest\'\n\n\n// The component to test\nconst MessageComponent = {\n  template: "<p>{{ msg }}</p>",\n  props: ["msg"],\n};\n\ntest("displays message", () => {\n  const wrapper = mount(MessageComponent, {\n    props: {\n      msg: "Hello world",\n    },\n  });\n\n  // Assert the rendered text of the component\n  expect(wrapper.text()).toContain("Hello world");\n});\n\n

\n

 FAIL  src/tests/hello-world.test.ts > displays message\nReferenceError: document is not defined\n \xe2\x9d\xaf Proxy.mount node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7840:14\n    7838|     addToDoNotStubComponents(component);\n    7839|     registerStub({ source: originalComponent, stub: component });\n    7840|     var el = document.createElement(\'div\');\n       |              ^\n    7841|     if (options === null || options === void 0 ? void 0 : options.attachTo) {\n    7842|         var to = void 0;\nRe-running tests... [ src/tests/hello-world.test.ts ]\n\n

\n

我的package.json

\n

{\n  "name": "vite-vue3-poc",\n  "version": "0.0.0",\n  "scripts": {\n    "serve": "vite preview",\n    "build": "vite build",\n    "coverage": "vitest --coverage",\n    "dev": "vite",\n    "preview": "vite preview",\n    "test": "vitest"\n  },\n  "dependencies": {\n    "@mdi/font": "5.9.55",\n    "prettier": "^2.5.1",\n    "roboto-fontface": "*",\n    "vue": "^3.2.25",\n    "vuetify": "^3.0.0-alpha.0",\n    "webfontloader": "^1.0.0"\n  },\n  "devDependencies": {\n    "@vitejs/plugin-vue": "^2.0.0",\n    "@vue/cli-plugin-babel": "5.0.0-beta.7",\n    "@vue/cli-service": "5.0.0-beta.7",\n    "@vue/test-utils": "^2.0.0-rc.18",\n    "@vuetify/vite-plugin": "^1.0.0-alpha.3",\n    "sass": "^1.38.0",\n    "sass-loader": "^10.0.0",\n    "vite": "^2.7.2",\n    "vitest": "^0.1.23",\n    "vue-cli-plugin-vuetify": "~2.4.5",\n    "vuetify-loader": "^2.0.0-alpha.0"\n  }\n}\n\n

\n

vite.config.js

\n

import { defineConfig } from "vite";\nimport vue from "@vitejs/plugin-vue";\nimport vuetify from "@vuetify/vite-plugin";\n\nimport path from "path";\n/// <reference types="vitest" />\n\n// Configure Vitest (https://vitest.dev/config)\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  test: {\n    /* for example, use global to avoid globals imports (describe, test, expect): */\n    // globals: true,\n  },\n  plugins: [\n    vue(),\n\n    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin\n    vuetify({\n      autoImport: true,\n    }),\n  ],\n  define: { "process.env": {} },\n  resolve: {\n    alias: {\n      "@": path.resolve(__dirname, "src"),\n    },\n  },\n});\n\n

\n

Answer 1

最后通过手动安装jsdom和声明来修复它vite.config.ts

export default defineConfig({
  test: {

    globals: true,
    environment: "jsdom",
  },
...
}

Answer 2

正如其他人指出的那样，您需要environment: 'jsdom'设置vitest.config.ts. 或者，您可以设置environment: 'happy-dom'.

在Vitest 文档提供的示例中，他们曾经使用happy-dom而不是jsdom. 据我所知，happy-dom这是一个更快的替代方案jsdom。我正在happy-dom我的项目中使用它，我很满意！:)

编辑：我更改了措辞以反映 Vitest 示例曾经使用happy-dom. 截至撰写本文时，它使用jsdom.

Answer 3

这个配置对我有帮助

你的vite.config.ts

import { fileURLToPath, URL } from "node:url"
import { defineConfig } from "vite"
import type { UserConfig as VitestUserConfigInterface } from "vitest/config"
import vue from "@vitejs/plugin-vue"

const vitestConfig: VitestUserConfigInterface = {
  test: {
    globals: true,
    environment: "jsdom",
  },
}

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  test: vitestConfig.test,
})