使用 Vue Test Utils 进行单元测试
使用 Vue Test Utils 编写组件单元测试
使用 Vue Test Utils 进行单元测试 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
测试组件
Vue Test Utils 可以让您在测试中渲染组件、检查其输出并模拟用户交互。然后，您可以断言组件的行为是否符合预期。
挂载
mount 函数会完整渲染组件，包括其所有子组件。它会返回一个 wrapper 对象，其中包含用于查询和操作渲染结果的辅助方法。
import { mount } from "@vue/test-utils"
import Counter from "./Counter.vue"
const wrapper = mount(Counter)shallowMount
shallowMount 会渲染组件，但会用存根替换其子组件。这样可以将被测试组件与其子组件隔离，非常适合真正的单元测试。
import { shallowMount } from "@vue/test-utils"
const wrapper = shallowMount(ParentComponent)
// child components are stubbed out挂载与 shallowMount
当您想要将组件与其子组件一起测试时，请使用 mount；当您只想隔离当前组件时，请使用 shallowMount。浅层挂载可以让测试保持聚焦并快速运行。
查找元素
请将 wrapper.find 与 CSS 选择器结合使用来定位元素。find 会返回该元素的包装器，您可以对其进行检查或操作。
const button = wrapper.find("button")
const title = wrapper.find(".title")断言渲染输出
检查渲染后的文本或 HTML，以验证组件是否显示了您预期的内容。
test("renders the message", () => {
const wrapper = mount(Greeting, {
props: { name: "Sam" }
})
expect(wrapper.text()).toContain("Hello, Sam")
})测试属性
通过挂载选项传入属性，并断言组件是否正确渲染这些属性。这样可以验证组件是否会对其输入作出响应。
const wrapper = mount(UserCard, {
props: { user: { name: "Lin", role: "Admin" } }
})
expect(wrapper.text()).toContain("Lin")
expect(wrapper.text()).toContain("Admin")触发事件
使用 trigger 模拟用户操作。它会返回一个承诺，因此请等待它完成，让 Vue 先更新 DOM，然后再进行断言。
test("increments on click", async () => {
const wrapper = mount(Counter)
await wrapper.find("button").trigger("click")
expect(wrapper.text()).toContain("1")
})设置输入值
在输入框包装器上使用 setValue 来模拟输入，然后断言产生的行为。
const input = wrapper.find("input")
await input.setValue("hello@example.com")
expect(wrapper.vm.email).toBe("hello@example.com")测试触发的事件
当组件触发事件时，wrapper.emitted 会记录该事件。请断言触发的是正确的事件，并且携带了正确的载荷。
test("emits submit with form data", async () => {
const wrapper = mount(LoginForm)
await wrapper.find("form").trigger("submit")
expect(wrapper.emitted("submit")).toBeTruthy()
expect(wrapper.emitted("submit")[0]).toEqual([{ user: "" }])
})组合一个测试
完整的组件测试会挂载组件、与组件交互，并对输出或触发的事件进行断言。
import { mount } from "@vue/test-utils"
import TodoInput from "./TodoInput.vue"
test("adds a todo", async () => {
const wrapper = mount(TodoInput)
await wrapper.find("input").setValue("Buy milk")
await wrapper.find("button").trigger("click")
expect(wrapper.emitted("add")[0]).toEqual(["Buy milk"])
})快速检查
检验您对 Vue Test Utils 的掌握情况。
回顾
Vue Test Utils 可以使用 mount（完整组件树）或 shallowMount（子组件使用存根）来渲染组件。使用 find 查询，使用 trigger 和 setValue 模拟操作（请等待它们完成），并对 text() 或 emitted() 进行断言。通过挂载选项传入 props。接下来，您将对整个应用进行端到端测试。
常见问题解答
「使用 Vue Test Utils 进行单元测试」课时是免费的吗？
是的 — 「使用 Vue Test Utils 进行单元测试」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「使用 Vue Test Utils 进行单元测试」这节课中我会学到什么？
使用 Vue Test Utils 编写组件单元测试 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。
「使用 Vue Test Utils 进行单元测试」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。