简介

Vue 测试库建立在 DOM 测试库 的基础上，通过添加用于处理 Vue 组件的 API 来扩展其功能。它建立在 @vue/test-utils 的基础上，这是 Vue 的官方测试库。

• Vue 测试库在 GitHub 上

简而言之，Vue 测试库执行以下三个操作：

1. 重新导出来自 DOM 测试库 的查询实用程序和帮助程序。
2. 隐藏与测试库 指导原则 冲突的 @vue/test-utils 方法。
3. 对来自这两个来源的一些方法进行调整。

快速入门

如果使用 Vue2

npm

npm install --save-dev @testing-library/vue@5

Yarn

yarn add --dev @testing-library/vue@5

如果使用 Vue3

npm

npm install --save-dev @testing-library/vue

Yarn

yarn add --dev @testing-library/vue

现在你可以使用所有 DOM 测试库 的 getBy、getAllBy、queryBy 和 queryAllBy 命令。查看 查询的完整列表。

你可能也希望安装 @testing-library/jest-dom，这样你就可以使用 自定义的 Jest 匹配器 来测试 DOM。

问题

你想为你的 Vue 组件编写可维护的测试。作为此目标的一部分，你希望避免在测试中包含组件的实现细节。你更希望专注于让你的测试能够提供你所期望的信心。

解决方案

Vue 测试库 是一个非常轻量级的 Vue 组件测试解决方案。它在 @vue/test-utils 的基础上提供了轻量级的实用程序函数，从而鼓励更好的测试实践。

其主要指导原则是：

你的测试越接近你使用软件的方式，它们就能提供越多的信心。

因此，你的测试将不再处理渲染的 Vue 组件实例，而是直接操作实际的 DOM 节点。

该库提供的实用程序功能允许你像用户一样查询 DOM。它们允许你通过标签文本查找元素，通过文本查找链接和按钮，并断言你的应用程序是可访问的。

它还公开了一种推荐的方式，可以通过 data-testid 查找元素，作为一种“备用方案”，用于文本内容和标签没有意义或不切实际的元素。