Testing Library - 简介

@testing-library 软件包系列以用户为中心的方式帮助您测试 UI 组件。

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

核心库 DOM Testing Library，是一个轻量级的解决方案，用于通过查询和与DOM节点（无论是使用JSDOM/Jest模拟还是在浏览器中）进行交互来测试网页。它提供的主要实用程序涉及以类似于用户在页面上查找元素的方式查询DOM中的节点。这样，该库有助于确保您的测试使您对应用程序在实际用户使用时的表现充满信心。

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

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

使用测试库应避免的事项

您可能希望避免以下实现详细信息：
1、组件的内部状态

2、组件的内部方法

3、组件的生命周期方法

4、子组件

指导原则

我们尝试只提供那些鼓励你编写与实际使用方式相似的网页测试的方法和实用工具。

本项目中公共设施的配置基于以下指导原则：

1、如果它与渲染组件相关，那么它应该处理 DOM 节点而不是组件实例，并且它不应该鼓励处理组件实例。

2、它通常对于以用户会使用的方式测试应用程序组件很有用。我们在这里做出了一些权衡，因为我们正在使用计算机和通常是一个模拟的浏览器环境，但总的来说，实用程序应该鼓励以预期的方式使用组件的测试。

3、实用工具和API应该简单且灵活。

4、说到底，我们想要的是一个轻便、简单、易于理解的库。

FAQ

1、我应该使用哪种 get 方法？

答：参照：Which Query Should I Use

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

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

       在编写测试时，请记住：

       您的测试越接近软件的实际使用方式，它们给您的信心就越多。

3、如果我的应用已本地化，而我无权访问测试中的文本，该怎么办？

这是相当常见的。我们的第一个建议是尝试获取测试中使用的默认文本。这将使一切变得更加容易（而不仅仅是使用此实用程序）。如果这不可能，那么您可能最好坚持使用data-testids（这本身也不错）。

4、我真的不喜欢 data-testids，但其他查询都没有意义。我必须使用 data-testid 吗？

当然不是。不过，人们不喜欢 data-testid 属性的一个常见原因是，他们担心将其发送到生产环境。我建议，你可能需要一些在生产环境中偶尔运行的简单端到端测试，以确保一切正常。在这种情况下，data-testid 属性将非常有用。即使你不在生产环境中运行这些测试，你可能也想在即将发送到生产环境的相同代码上运行一些端到端测试。在这种情况下，data-testid 属性也会在那里很有价值。

话虽如此，如果你真的不想发送 data-testid 属性，那么你可以使用这个简单的 babel 插件来删除它们。

如果你根本不想使用它们，那么你可以简单地使用常规的 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 = [
  /* your items */
]
const {container} = render(/* however you render this stuff */)
const thirdItem = getAllByRole(container, 'listitem')[2]

6、我无法访问组件方法或组件实例！

这是有意的。

我们希望您将注意力集中在测试用户观察到的组件的输出和功能上，并避免担心组件的实现细节。

我们相信这会导致更少的脆弱和更有意义的测试代码。

请参阅此测试库的指导原则以获取更多信息。