Vue Academy · 课时

测试用户交互与事件

wrapper.trigger('click')、setValue()、wrapper.vm.$emit()，以及异步 flushPromises()

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

模拟用户行为

除了渲染之外，测试还应模拟用户的操作：点击按钮、在输入框中输入内容、提交表单。@vue/test-utils 的 wrapper 提供了分发 DOM 事件并在之后更新 Vue 的方法。

使用 trigger 触发点击事件

wrapper.trigger("click") 会在元素上触发点击事件。由于它会更新 DOM，因此会返回一个异步结果——请等待它，以便断言能够看到结果。

const button = wrapper.get("button")
await button.trigger("click")
expect(wrapper.text()).toContain("Clicked once")

测试为什么是异步的

Vue 会异步更新 DOM。交互操作后，新的状态要到下一个时钟周期才会显示。等待 trigger 返回的结果，可以让 DOM 稳定下来后再进行断言。

it("increments on click", async () => {
  const wrapper = mount(Counter)
  await wrapper.get("button").trigger("click")
  expect(wrapper.get(".count").text()).toBe("1")
})

使用 setValue 处理输入框

要在字段中输入内容，请对输入框 wrapper 使用 wrapper.setValue(value)。它会设置值并分发一个 input 事件，从而更新 v-model。

const input = wrapper.get("input")
await input.setValue("hello@example.com")
expect(input.element.value).toBe("hello@example.com")

复选框与选择框

setValue 会根据元素类型进行适配：复选框传入布尔值，选择框传入选项值。

await wrapper.get("input[type=checkbox]").setValue(true)
await wrapper.get("select").setValue("tr")

断言 emitted 事件

组件通过 emitted 事件向上层通信。wrapper.emitted() 会返回组件发出的所有事件记录，并以事件名称为键。

await wrapper.get("button").trigger("click")
expect(wrapper.emitted()).toHaveProperty("submit")

检查 emitted 事件的有效负载

wrapper.emitted("name") 会返回一个数组，其中每项都是一次触发事件的参数数组。第一次触发事件的第一个参数是 emitted("name")[0][0]。

await wrapper.get("button").trigger("click")
const events = wrapper.emitted("submit")
expect(events).toHaveLength(1)
expect(events[0][0]).toEqual({ email: "a@b.com" })

表单提交测试

组合这些步骤：填写字段、提交表单，然后断言 emitted 事件的有效负载。

it("emits submit with the email", async () => {
  const wrapper = mount(LoginForm)
  await wrapper.get("input").setValue("a@b.com")
  await wrapper.get("form").trigger("submit.prevent")
  expect(wrapper.emitted("submit")[0][0]).toEqual({ email: "a@b.com" })
})

组件中的异步操作

许多处理器会调用接口，并在异步操作完成后更新状态。断言执行时，微任务可能还没有运行，因此您必须等待。

async function load() {
  loading.value = true
  data.value = await fetchData()
  loading.value = false
}

flushPromises

Test Utils 中的 flushPromises 会解析所有待处理的微任务（然后回调）。触发异步操作后请等待它，这样已完成的异步结果及其引起的 DOM 更新才能应用。

import { flushPromises } from "@vue/test-utils"

await wrapper.get("button").trigger("click")
await flushPromises()
expect(wrapper.text()).toContain("Loaded")

组合异步测试

基本模式是：挂载、交互、await flushPromises()、断言。将测试函数标记为 async，这样就可以在整个函数中使用 await。

it("shows results after fetch", async () => {
  const wrapper = mount(SearchBox)
  await wrapper.get("input").setValue("vue")
  await wrapper.get("form").trigger("submit.prevent")
  await flushPromises()
  expect(wrapper.findAll("li")).toHaveLength(2)
})

快速检查

检查您对交互测试的理解。

回顾

您学会了如何测试交互和事件：

trigger("click") 会触发事件；由于 Vue 会异步更新，因此请等待它。
setValue 会设置输入框、复选框和选择框的值，并为 v-model 触发输入事件。
wrapper.emitted() 会记录 emitted 事件；emitted("name")[0][0] 会读取第一个有效负载。
对于异步处理器，请在断言前执行 await flushPromises()。
将测试标记为 async，以便使用 await。

常见问题解答

「测试用户交互与事件」课时是免费的吗？

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

「测试用户交互与事件」这节课中我会学到什么？

wrapper.trigger('click')、setValue()、wrapper.vm.$emit()，以及异步 flushPromises() 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「测试用户交互与事件」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy