Testing Library 入门

简介

@testing-library家族的包可以帮助你以用户为中心的方式测试 UI 组件。

你的测试越像你的软件的使用方式，你就会更有信心。

问题

你希望编写易于维护的测试，以确保组件对用户正常工作。作为实现这个目标的一部分，你希望测试避免包含实现细节，这样即使对组件进行重构（更改实现但不更改功能），也不会破坏测试并减慢你和团队的速度。

解决方案

核心库 DOM Testing Library 是一种轻量级的解决方案，用于通过查询和与 DOM 节点进行交互来测试网页（无论是使用 JSDOM/Jest 进行模拟，还是在浏览器中）。它提供的主要功能包括以类似用户在页面上查找元素的方式查询 DOM 节点。通过这种方式，该库有助于确保你的测试能够让你对应用程序在真实用户使用时的运行情况有信心。

核心库已经封装成为几个框架的人性化 API，包括 React、Angular 和 Vue。还有一个用于在 Cypress 中使用 testing-library 查询进行端到端测试的插件，以及一个针对 React Native 的实现。

该库的用途

1. 不是一个测试运行器或框架
2. 不特定于某个测试框架

DOM Testing Library 适用于任何提供 DOM API 的环境，例如 Jest、Mocha + JSDOM 或真实浏览器。

在使用 Testing Library 时应避免的事项

Testing Library 鼓励你避免测试实现细节，例如你正在测试的组件的内部细节（尽管仍然可能）。本库的指导原则强调侧重于与用户如何交互的测试，使其与你的网页紧密相似。

你可能希望避免以下实现细节：

1. 组件的内部状态
2. 组件的内部方法
3. 组件的生命周期方法
4. 子组件

指导原则

你的测试与软件的使用方式越相似，它们就能给你越多的信心。

我们努力只公开那些鼓励你编写与你的网页使用方式非常相似的测试的方法和工具。

该项目中包含的实用工具是基于以下指导原则的：

1. 如果涉及渲染组件，则应处理 DOM 节点而不是组件实例，并且不应鼓励处理组件实例。
2. 它应该通常对测试应用程序组件的方式有用，就像用户使用它们一样。我们在这里做了一些权衡，因为我们使用的是计算机和通常是模拟的浏览器环境，但总体而言，这些工具应该鼓励使用组件的方式进行测试，这就是它们的预期用途。
3. 实用工具的实现和 API 应该简单且灵活。

最重要的是，我们希望这个库非常轻量级、简单易懂。

FAQ

1. 我应该使用哪个获取方法？

   请参考 Which Query Should I Use。

2. 我可以使用这个库编写单元测试吗？

   当然可以！你可以使用这个库编写单元测试、集成测试和端到端测试。

   在编写测试时，请记住：

   测试与软件的使用方式越相似，给予你的信心就越多。- 2018年2月17日

3. 如果我的应用程序本地化，并且我无法在测试中访问文本怎么办？

   这是非常常见的情况。我们的第一个建议是尝试获取测试中使用的默认文本。这将使一切变得更容易（不仅仅是使用该实用程序）。如果这不可能，那么你最好还是坚持使用data-testid（这也不错）。

4. 我真的不喜欢data-testid，但是其他查询方式又不合适。我必须使用data-testid吗？

   绝对不必。话虽如此，人们不喜欢data-testid属性的常见原因是他们担心将其发布到生产环境。我建议你可能希望定期在生产环境中运行一些简单的端到端测试，以确保一切正常运行。在这种情况下，data-testid属性将非常有用。即使你不在生产环境中运行这些测试，你可能仍然希望运行一些在要发布到生产环境的相同代码上运行的端到端测试。在这种情况下，data-testid属性也将很有价值。

   尽管如此，如果你真的不想发布data-testid属性，那么你可以使用这个简单的 Babel 插件 babel-plugin-react-remove-properties 来删除它们。

   如果你完全不想使用它们，那么你可以直接使用常规的 DOM 方法和属性来查询容器中的元素。

   const firstLiInDiv = container.querySelector('div li')
   const allLisInDiv = container.querySelectorAll('div li')
   const rootElement = container.firstChild

5. 如果我正在迭代一个项目列表，并且我想为它们设置data-testid="item"属性，我该如何区分它们？

   你可以通过在选择器中包含:nth-child来选择你想要的项目。

   const thirdLiInUl = container.querySelector('ul > li:nth-child(3)')

   或者你可以使用getAllByRole来查询listitem角色，并访问相应索引：

   const items = [
    /* 你的项目 */
   ]
   const {container} = render(/* 你渲染这些内容的方式 */)
   const thirdItem = getAllByRole(container, 'listitem')[2]

6. 帮帮忙！我无法访问组件的方法或组件实例！

   这是有意的。

   我们希望你专注于测试组件的输出和功能，就像用户观察到的那样，而不用担心组件的具体实现细节。

   我们相信这会导致更不容易出错和更有意义的测试代码。

   请参考这个测试库的指导原则获取更多信息。

React Testing Library

React Testing Library在 DOM Testing Library
的基础上构建，添加了与 React 组件一起使用的 API。

使用 Create React App 创建的项目已经默认支持 React Testing Library。如果不是这种情况，你可以通过 npm 添加它，像这样：

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

yarn add --dev @testing-library/react

问题

你希望为你的React组件编写易于维护的测试。作为这个目标的一部分，你希望测试避免包含组件的实现细节，而是专注于使测试能够给你带来所期望的信心。作为这个目标的一部分，你希望你的测试基础能够长期维护，以便对组件进行重构（对实现的更改但不改变功能）不会破坏你的测试并降低你和团队的效率。

解决方案

React Testing Library 是一个非常轻量级的用于测试React组件的解决方案。它在 react-dom 和react-dom/test-utils 之上提供了轻量级的实用函数，以鼓励更好的测试实践。它的主要指导原则是：

你的测试越像你的软件使用方式，它们给你的信心就越大。

因此，与处理已渲染的 React 组件实例不同，你的测试将与实际的 DOM 节点一起工作。这个库提供的实用工具可以以用户的方式轻松查询 DOM。它允许你根据标签文本查找表单元素（就像用户一样），根据文本查找链接和按钮（就像用户一样）。它还公开了一种通过 data-testid 查找元素的推荐方法，作为对于文本内容和标签无意义或不可行的元素的"逃生口"。

这个库鼓励你的应用程序更具可访问性，并允许你更接近使用组件的方式来进行测试，从而使你的测试能够更加确保在实际用户使用时你的应用程序能够正常工作。

这个库是 Enzyme 的替代品。虽然你可以使用 Enzyme 遵循这些准则，但由于 Enzyme 提供了所有额外的实用工具（用于测试实现细节的实用工具），因此更难强制执行这些准则。请在常见问题中了解更多信息。

这个库不是：

1. 测试运行器或框架
2. 特定于某个测试框架（尽管我们推荐 Jest 作为首选，但该库可以与任何框架一起使用。请参阅不使用Jest）

注意：这个库是构建在 DOM Testing Library 之上的，在其中大部分查询逻辑都存在。

教程

请观看下面的"What is React Testing library?"视频，介绍该库。

• 视频 What is React Testing library?
• 教程 React Testing Library

Vue Testing Library

Vue Testing Library 在 DOM Testing Library 的基础上构建，通过添加与Vue组件一起使用的 API。它是基于 @vue/test-utils 的，@vue/test-utils 是 Vue 官方的测试库。

• Vue Testing Library在GitHub上的链接

简而言之，Vue Testing Library 做了以下三件事：

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

快速入门

如果使用Vue2：

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

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

如果使用Vue3：

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

yarn add --dev @testing-library/vue

你可能还希望安装 @testing-library/jest-dom，以便可以使用 DOM 的自定义Jest匹配器。

问题

你想为 Vue 组件编写易于维护的测试。作为这个目标的一部分，你希望测试避免包含组件的实现细节。你更愿意专注于使测试能够给你带来所期望的信心。

解决方案

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

它的主要指导原则是：

你的测试越像你的软件使用方式，它们给你的信心就越大。

因此，与处理已渲染的 Vue 组件实例不同，你的测试将与实际的DOM节点一起工作。

这个库提供的实用工具可以以用户的方式轻松查询 DOM。它们允许你根据标签文本查找元素，根据文本查找链接和按钮，并断言你的应用程序是可访问的。

它还公开了一种通过 data-testid 查找元素的推荐方法，作为对于文本内容和标签无意义或不可行的元素的"逃生口"。

链接

• Testing Library 官网文档