如何通过靠近 React 测试库中的另一个元素来获取元素

Question

我一直在尝试使用React 测试库编写一些测试并遵循其指导原则，因为测试应该以用户使用应用程序组件的方式来测试应用程序组件。

我有一个组件，它呈现一个对象列表，每个对象都有多个字段，从而生成如下所示的 DOM：

<div>
  <h1>Fluffy</h1>
  <h2>Cat</h2>
  <span>3 years old</span>
</div>
<div>
  <h1>Oscar</h1>
  <h2>Cat</h2>
  <span>2 years old</span>
</div>
<div>
  <h1>Charlie</h1>
  <h2>Dog</h2>
  <span>3 years old</span>
</div>

我想断言每个对象都使用相关字段正确呈现，但我不知道如何使用 React 测试库来做到这一点。到目前为止我有：

it('renders the animal names, species, and ages', () => {
  render(<MyAnimalsComponent />)

  const fluffyName = screen.getByRole('heading', { name: 'Fluffy' })
  expect(fluffyName).toBeInTheDocument()

  // The problem here is that there are multiple headings with the name "Cat" (Fluffy and Oscar) and I have no way of checking that the one that is returned is actually the one for Fluffy.
  const fluffySpecies = screen.getByRole('heading', { name: 'Cat' })
  expect(fluffySpecies).toBeInTheDocument()

  // Likewise, the age "3 years old" is rendered for both Fluffy and Charlie. How do I make sure I get the one that is rendered in the same container as Fluffy's name?
  const fluffyAge = screen.getByText('3 years old')
  expect(fluffyAge).toBeInTheDocument()
})

有没有办法使用 React 测试库中的查询方法来仅查找与另一个元素具有共同父级的元素？或者一种获取元素的父元素然后只查找该元素的子元素的方法？

在遵循 React 测试库的指导原则的同时，实现这一目标的最佳方法是什么？

Answer 1

解决此问题的一种方法是使用顶级getByRole和getByText方法并传入一个元素作为第一个参数，以将查询限制为该元素。

对于我的示例，这涉及role在某些包装元素上设置属性，以便更轻松地从语义上查找元素：

<div role="list">
  <div role="listitem">
    <h1>Fluffy</h1>
    <h2>Cat</h2>
    <span>3 years old</span>
  </div>
  <div role="listitem">
    <h1>Oscar</h1>
    <h2>Cat</h2>
    <span>2 years old</span>
  </div>
  <div role="listitem">
    <h1>Charlie</h1>
    <h2>Dog</h2>
    <span>3 years old</span>
  </div>
</div>

然后在测试中，我找到了不同的列表项，然后对这些项执行查询：

import { render, screen, getByText, getByRole } from '@testing-library/react'

it('renders the animal names, species, and ages', () => {
  render(<MyAnimalsComponent />)

  const animals = screen.getAllByRole('listitem')

  const fluffyName = getByRole(animals[0], 'heading', { name: 'Fluffy' })
  expect(fluffyName).toBeInTheDocument()

  const fluffySpecies = getByRole(animals[0], 'heading', { name: 'Cat' })
  expect(fluffySpecies).toBeInTheDocument()

  const fluffyAge = getByText(animals[0], '3 years old')
  expect(fluffyAge).toBeInTheDocument()
})

更新：within使用可以说更容易理解的方法可以完成同样的事情：

import { render, screen, within } from '@testing-library/react'

it('renders the animal names, species, and ages', () => {
  render(<MyAnimalsComponent />)

  const animals = screen.getAllByRole('listitem')

  const fluffyName = within(animals[0]).getByRole('heading', { name: 'Fluffy' })
  expect(fluffyName).toBeInTheDocument()

  const fluffySpecies = within(animals[0]).getByRole('heading', { name: 'Cat' })
  expect(fluffySpecies).toBeInTheDocument()

  const fluffyAge = within(animals[0]).getByText('3 years old')
  expect(fluffyAge).toBeInTheDocument()
})