Vue Academy · 课时

测试框架简介

Q: 「测试框架简介」这节课中我会学到什么？

了解 Vue 测试生态与相关工具 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解 Vue 测试生态与相关工具

第 1 / 3 课13 个步骤

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

为什么要测试

自动化测试可以在用户发现错误之前捕获问题，记录代码应有的行为，并让您能够放心地重构。随着应用不断增长，测试对于无需手动检查即可维持质量变得至关重要。

三种测试类型

主要有三种测试级别：单元测试独立检查较小的代码单元，集成测试检查各部分能否协同工作，而端到端测试则像真实用户一样驱动整个应用。

单元测试

单元测试会在隔离环境中验证单个函数或组件，并模拟其依赖项。它们运行快速，还能准确指出发生故障的位置。您的测试大多数都应该是单元测试。

function add(a, b) {
  return a + b
}

test("add sums two numbers", () => {
  expect(add(2, 3)).toBe(5)
})

集成测试

集成测试检查多个单元能否正确协作，例如组件与其状态库协作，或表单调用接口包装器。它们可以发现单元测试单独运行时无法发现的连接问题。

端到端测试

端到端测试会启动真实浏览器，并完全按照用户的操作方式点击应用。它们最贴近真实情况，但也最慢、最脆弱，因此编写数量应当较少。

测试金字塔

测试金字塔建议在底层安排大量快速的单元测试，中间安排较少的集成测试，顶层只安排少量端到端测试。这样可以在可靠性和速度之间取得平衡。

Vitest

Vitest 是专为基于 Vite 的项目打造的快速现代测试运行器。它提供兼容 Jest 的应用程序接口，并能与使用 Vite 搭建的 Vue 3 应用无缝协作。

npm install -D vitest

Jest

Jest 是 JavaScript 生态中广泛使用的成熟测试运行器。Vitest 仿照了它的应用程序接口（describe、test、expect），因此两者之间的知识可以互相迁移。

describe("math", () => {
  test("adds", () => {
    expect(1 + 1).toBe(2)
  })
})

Vue Test Utils

Vue Test Utils 是用于对 Vue 组件进行单元测试的官方库。它会在测试环境中挂载组件，以便您与组件交互并验证其输出。

npm install -D @vue/test-utils

Cypress 与 Playwright

对于端到端测试，Cypress 和 Playwright 是常用选择。它们会自动化真实浏览器，让您能够编写点击、输入和导航操作，然后验证用户看到的内容。

选择您的技术栈

典型的 Vue 3 配置会使用 Vitest 和 Vue Test Utils 进行单元测试及组件测试，并使用 Cypress 或 Playwright 进行端到端测试。这种组合通过现代且得到良好支持的工具覆盖了整个测试金字塔。

快速检查

检验您对测试框架的掌握情况。

在交互式课程中回答

回顾

测试分为三个级别：单元测试、集成测试和端到端测试，并通过测试金字塔进行平衡（单元测试多，端到端测试少）。现代 Vue 技术栈使用 Vitest 或 Jest 配合 Vue Test Utils 进行单元测试，并使用 Cypress 或 Playwright 进行端到端测试。接下来，您将使用 Vue Test Utils 编写真正的单元测试。

免费开始

用 AI 导师学习 HTML — 免费

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

课程: 42
课程: 156

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

常见问题解答

「测试框架简介」课时是免费的吗？

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

「测试框架简介」这节课中我会学到什么？

了解 Vue 测试生态与相关工具你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「测试框架简介」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy