挂载与查询组件
mount()、shallowMount()、wrapper.find()、wrapper.findAll()、getByText()，以及 data-testid
挂载与查询组件 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
在测试中渲染组件
要测试组件，您必须将它渲染到 jsdom DOM 中，然后检查结果。@vue/test-utils 提供了 mount 以及带有查询辅助方法的 wrapper 对象。
mount：完整渲染
mount 会真实渲染组件以及它的所有子组件。当行为取决于子组件是否渲染出实际内容时，请使用它。
import { mount } from "@vue/test-utils"
import Card from "./Card.vue"
const wrapper = mount(Card, {
props: { title: "Hello" },
})shallowMount：替换子组件
shallowMount 会渲染组件，但会用轻量级替身替换子组件。这样可以将待测试单元与子组件的内部实现隔离开来。
import { shallowMount } from "@vue/test-utils"
import Page from "./Page.vue"
const wrapper = shallowMount(Page)
// child components appear as <child-stub />mount 与 shallowMount
请根据目的进行选择：
- mount——集成测试风格；您关注子组件如何渲染。
- shallowMount——单元测试风格；您只测试当前组件的逻辑和模板。
浅层挂载速度更快，也能避免子组件缺陷引发级联失败。
find：可选匹配
wrapper.find(selector) 接受一个 CSS 选择器并返回一个 wrapper。如果没有匹配项，结果的 exists() 会是 false，而不会抛出异常。
const title = wrapper.find("h1")
expect(title.exists()).toBe(true)
expect(title.text()).toBe("Hello")get：必需匹配
wrapper.get(selector) 类似于 find，但如果元素不存在就会抛出异常。当元素必须存在时请使用它——这里的错误消息比稍后访问空值更清晰。
const button = wrapper.get("button.submit")
// throws immediately with a helpful message if absent选择 find 还是 get
对于应该始终存在的元素，请使用 get（并断言其内容）。当您测试元素是否存在时，请使用 find，例如只在某些情况下渲染的错误提示。
expect(wrapper.find(".error").exists()).toBe(false)
const label = wrapper.get("label")
expect(label.text()).toBe("Email")findAll：多个元素
wrapper.findAll(selector) 会返回一个 wrapper 数组，其中包含每个匹配项。它非常适合断言列表长度和遍历各行。
const items = wrapper.findAll("li")
expect(items).toHaveLength(3)
expect(items[0].text()).toBe("First")使用 text() 读取文本
wrapper.text() 会返回元素及其子元素经过首尾空白裁剪并拼接后的文本内容。它非常适合断言可见文本，而不必关注精确的标记结构。
expect(wrapper.text()).toContain("3 results found")使用 html() 检查标记
wrapper.html() 会返回渲染后的 HTML 字符串。调试失败的测试，或断言属性和结构时，它都很有用。
console.log(wrapper.html())
// <div class="card"><h1>Hello</h1></div>
expect(wrapper.html()).toContain("class=\"card\"")查找子组件
除了 CSS 选择器之外，find 和 findComponent 还接受组件引用，用于定位特定的子组件实例。
import { findComponent } from "@vue/test-utils"
import Avatar from "./Avatar.vue"
const avatar = wrapper.findComponent(Avatar)
expect(avatar.exists()).toBe(true)快速检查
检查您对使用测试工具进行查询的理解。
回顾
您学会了如何渲染和查询组件：
mount会真实渲染子组件；shallowMount会用替身替换它们，以实现隔离。find返回可能为空的 wrapper；找不到元素时，get会抛出异常。findAll会为列表返回一个数组。text()读取可见文本；html()返回渲染后的标记。findComponent定位特定的子组件。
常见问题解答
「挂载与查询组件」课时是免费的吗？
是的 — 「挂载与查询组件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「挂载与查询组件」这节课中我会学到什么？
mount()、shallowMount()、wrapper.find()、wrapper.findAll()、getByText()，以及 data-testid 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「挂载与查询组件」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。