常见问题解答

我应该使用哪个 get 方法？

请参阅 我应该使用哪个查询

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

绝对可以！您可以使用这个库编写单元测试、集成测试和端到端测试。

在编写测试时，请记住

您的测试越接近软件的使用方式，它们就能带给您越多的信心。 - 2018 年 2 月 17 日

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

这种情况相当普遍。我们的第一个建议是尝试在测试中获得默认文本。这将使一切变得更容易（不仅仅是使用此实用程序）。如果这不可行，那么您最好坚持使用 data-testid（这本身也不错）。

我真的很不喜欢 data-testid，但其他查询都不合适。我必须使用 data-testid 吗？

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

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

如果您根本不想使用它们，那么您可以简单地使用常规的 DOM 方法和属性从容器中查询元素。

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

如果我要迭代一个我想在其中添加 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]

救命！我无法访问组件方法或组件实例！

这是**故意的**。

我们希望您专注于测试组件的输出和功能，就像用户观察到的那样，并**避免担心组件的实现细节**。

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

请参考此测试库的 指导原则 了解更多信息。