找到元素和组件

有着语法的 find
findAll

在本页中所描述的测试源码可以在这里找到。

创建组件

对于本例，我们将创建一个 <Child> 组件和一个 <Parent> 组件。

Child:

Parent:

<template>
  <div>
    <span v-show="showSpan">
      Parent Component
    </span>
    <Child v-if="showChild" />
  </div>
</template>
<script>
import Child from "./Child.vue"
export default {
  components: { Child },
  data() {
    return {
      showSpan: false,
      showChild: false
    }
  }
}
</script>

正如通过使用 document.querySelector 语法，可以轻易地选取普通的 HTML 元素；也提供了一个 isVisible 方法以检查元素是否被 v-show 条件性地渲染了。创建一个 Parent.spec.js，并输入下面的测试代码：

it("does render a span", () => {
  const wrapper = shallowMount(Parent, {
    data() {
      return { showSpan: true }
    }
  })
})

它也通过了！

和 isVisible 之于 v-show 非常相似的是，vue-test-utils 提供了一个 exists 方法以用来测试当使用 v-if 时元素被条件性渲染的情况。

通过 `name` 和 `Component` 找到组件

找到子组件和找到普通 HTML 元素稍有不同。主要有两种方法来断言 Vue 子组件的存在：

find(Component)
find({ name: "ComponentName" })

这两种方法在一个例子中可能更好理解一些。让我们从 find(Component) 语法开始。这需要 import 组件，并将其引用传入 find 函数中。

find 的实现颇为复杂，因为它要以 querySelector 的语法工作，同时也有很多其他的语法。你可以看看源码中关于找到 Vue 子组件的。基本上它检查了每个渲染过的子组件的 name 属性，其后检查 constructor，还有一些其他属性。

it("renders a Child component", () => {
  const wrapper = shallowMount(Parent, {
    data() {
      return { showChild: true }
    }
  })
  expect(wrapper.find({ name: "Child" }).exists()).toBe(true)
})

通过！使用 name 会有那么一点不直观, 所以引入真实的组件也是个辙。另一个选项是像头两个例子中出现的那样简单地添加一个 class 或 id 并用 querySelector 的语法样式查询。

想要断言一定数量的元素都被渲染了也是个频发的场景。一个通常的案例是通过 v-for 渲染出的一个项目列表。比如下面这个 <ParentWithManyChildren> 就渲染出了若干 <Child> 组件。

我们可以像这样用 findAll 编写测试以断言有三个 <Child> 组件被渲染了：

it("renders many children", () => {
  const wrapper = shallowMount(ParentWithManyChildren)
  expect(wrapper.findAll(Child).length).toBe(3)
})

运行 yarn test:unit 显示测试通过。对于 findAll 同样适用 querySelector 语法。

总结

本页覆盖了：

使用有着 querySelector 语法的 find 和 findAll
将组件或名称选择器传入 find 和 findAll

创建组件

通过 name 和 Component 找到组件

总结

通过 `name` 和 `Component` 找到组件