跳到主要内容

简介

Vue Testing Library 建立在 DOM Testing Library 的基础上，增加了用于处理 Vue 组 件的 API。它建立 在@vue/test-utils（Vue 的官方测试库） 之上。

简而言之，Vue Testing Library 做了三件事:

  1. 从 DOM Testing Library 中重新导出查询工具函数和辅助工具函数。
  2. 隐藏与 Testing Library 指导原则相冲突的 @vue/test-utils 方法。
  3. 调整了两个来源的一些方法。

快速入门​

如果使用的是 Vue2

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

如果使用的是 Vue3

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

你现在可以使用 DOM Testing Library 提供的所有getBy, getAllBy, queryBy和queryAllBy命令。请看这里 的完整查询列表。

你也可能对安装 @testing-library/jest-dom 感兴趣，这样你就可以使用 DOM 的 自定义 Jest 匹配器了

问题​

你想为你的 Vue 组件编写可维护的测试。作为这个目标的一部分，你希望你的测试能避 免包括组件的实现细节。你应该把重点放在让你的测试给你带来信心上，这也是他们的目 的。

解决方案​

Vue Testing Library 是一个非常轻量级的解决方案，用于测试 Vue 组件。它在 @vue/test-utils 的基础上提供了轻量级的实用功能，其方式是鼓励更好的测试实践。

它的主要指导原则是:

你的测试越像你的软件的使用方式，他们就越能给你信心

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

这个库所提供的工具有助于以用户的方式查询 DOM。它们允许你通过标签文本找到元素，从 文本中找到链接和按钮，并断言你的应用程序是可访问的。

当文本内容和标签 “不可用” 的情况下，它提供另外一种推荐的查询元素方式 ，data-testid。