Vue Academy · 课时

为 Vue 项目配置 Vitest

vitest.config.ts、jsdom 环境、@vue/test-utils、使用 v8 生成覆盖率，以及测试脚本

第 1 / 4 课13 个步骤

为 Vue 项目配置 Vitest 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

为什么 Vue 使用 Vitest？

Vitest 是一个基于 Vite 构建的快速测试运行器。由于 Vue 3 项目已经使用 Vite，Vitest 可以复用相同的配置和转换流程，无需为测试单独构建流程。

它提供了类似 Jest 的接口，并原生支持 ESM 和 TypeScript。

安装工具

添加 Vitest、Vue 测试工具和 jsdom（适用于 Node 的类浏览器 DOM）。

// terminal
// npm install -D vitest @vue/test-utils jsdom @vitest/coverage-v8

jsdom 环境

组件需要一个 DOM 才能挂载。Node 没有 DOM，因此测试会在jsdom 中运行；它会模拟浏览器 API。请在配置中将其设为测试环境。

// vitest.config.ts
import { defineConfig } from "vitest/config"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: "jsdom",
  },
})

启用全局变量

默认情况下，您需要在每个文件中导入 describe、it 和 expect。设置 globals: true 后，就可以像使用 Jest 一样在任何地方使用它们，而无需导入。

// vitest.config.ts
export default defineConfig({
  test: {
    environment: "jsdom",
    globals: true,
  },
})

全局变量的 TypeScript 类型

在 TypeScript 中使用全局变量时，请添加 Vitest 类型，这样编辑器才能识别 describe 及其同类辅助函数。

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

第一个测试文件

Vitest 会发现以 .test.ts 或 .spec.ts 结尾的文件。启用全局变量后，您可以直接编写测试。

// math.test.ts
describe("add", () => {
  it("sums two numbers", () => {
    expect(1 + 2).toBe(3)
  })
})

挂载组件

安装 @vue/test-utils 并配置好 jsdom 后，您就可以在测试中挂载真实组件，并断言其渲染结果。

import { mount } from "@vue/test-utils"
import Hello from "./Hello.vue"

it("renders the greeting", () => {
  const wrapper = mount(Hello, { props: { name: "Ada" } })
  expect(wrapper.text()).toContain("Hello, Ada")
})

添加覆盖率

覆盖率显示测试执行了哪些代码行。Vitest 支持v8 提供程序（快速且原生）。请在 test.coverage 下进行配置。

// vitest.config.ts
export default defineConfig({
  test: {
    coverage: {
      provider: "v8",
      reporter: ["text", "html"],
    },
  },
})

HTML 覆盖率报告

html 报告器会写入一份可浏览的报告（默认位置为 coverage/index.html）。打开它即可查看每个文件的代码行和分支覆盖率，以及突出显示的覆盖空缺。

// after running coverage:
// open coverage/index.html in a browser
// red lines = not executed by any test

package.json 脚本

设置便捷的脚本。test 运行测试套件；coverage 使用覆盖率标志运行。

// package.json
{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "coverage": "vitest run --coverage"
  }
}

监视模式与运行模式

直接运行 vitest 会保持在监视模式下，保存文件时重新运行受影响的测试，非常适合开发过程。在持续集成环境中，您需要运行一次后退出，因此请使用 vitest run。

// local dev:  npm run test     (watch)
// CI pipeline: npm run test:run (one pass, exits)

快速检查

检查您对 Vitest 设置的理解。

在交互式课程中回答

回顾

您已为 Vue 项目配置 Vitest：

安装 vitest、@vue/test-utils、jsdom 和覆盖率提供程序。
设置 environment: "jsdom"，让组件拥有 DOM。
globals: true 可以避免导入测试辅助函数；将 vitest/globals 添加到 tsconfig 的类型配置中。
使用 v8 提供程序和 html 报告器配置覆盖率。
添加 test 和 coverage 脚本；在持续集成环境中使用 vitest run。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 42
课程: 156

免费开始学习查看完整课程

常见问题解答

「为 Vue 项目配置 Vitest」课时是免费的吗？

是的 — 「为 Vue 项目配置 Vitest」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「为 Vue 项目配置 Vitest」这节课中我会学到什么？

vitest.config.ts、jsdom 环境、@vue/test-utils、使用 v8 生成覆盖率，以及测试脚本你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「为 Vue 项目配置 Vitest」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy