Блог

Мы столкнулись с более сложным пользовательским интерфейсом, который хотим протестировать:

 # Section Header A

 - Option 1
   [ ] checkbox
 - Option 2
   [ ] checkbox

# Section Header B

 - Option 1
   [ ] checkbox
  

Я хочу найти флажок в опции 1 заголовка раздела A или в псевдокоде:

 chain(
  getByRole('fieldset', {name: 'Section Header A'}),
  getByText('Option 1'),
  getByRole('checkbox')
)
  

В настоящее время мы решили эту проблему с помощью:

 import {
  getByText as globalGetByText,
  getByRole as globalGetByRole,
} from '@testing-library/dom';

const { container } = render(<MyComponent />);
const sectionA = globalGetByRole(container, 'fieldset', {name: 'Section Header A'}),
const option1 = globalGetByText(sectionA, 'Option 1'),
const finallyMyElement = globalGetByRole(option1, 'checkbox')
  

Обратите внимание на глобальное … переименование импорта, чтобы избежать столкновений с обычными запросами GetBy * и явной передачей ссылки на контейнер.

Мы не используем testids, в соответствии с духом react-testing-library.

Есть ли более интуитивно понятный способ?

Кажется within() , это решает мою проблему (https://testing-library.com/docs/dom-testing-library/api-within ):

 const { getByRole } = render(<MyComponent />);
const sectionA = getByRole('fieldset', {name: 'Section Header A'});
const option1 = within(sectionA).getByText('Option 1');
const finallyMyElement = within(option1).getByRole('checkbox');
  

Имейте в виду, это непроверено.