Как получить дочерний div родительского div с некоторым идентификатором теста с помощью библиотеки тестирования реакции?

Я хочу получить элемент div в родительском элементе с некоторым идентификатором теста

что я пытаюсь сделать?

У меня есть родительский div с идентификатором test-id «parent-2», и в нем есть элемент div с текстом Remove.

Я хочу получить этот элемент Remove div. также есть несколько элементов Remove div. что-то вроде ниже

<div data-test-id="parent-1">
    <div>Remove</div>
</div>
<div data-test-id="parent-2">
    <div>Remove</div>
</div>
<div data-test-id="parent-3">
    <div>Remove</div>
</div>

Итак, в приведенном выше html-коде я хочу нажать Удалить div из div с родительским test-id = "parent-2".

Я пытался сделать как показано ниже

utils.fireEvent.click(getByText('Remove'));

это выдает ошибку, обнаружено несколько экземпляров Remove.

Я пробовал также этот utils.fireEvent.click (getByTestId ('parent-2'). Children [0];

это работает. но это обращается к первому потомку родителя. однако хотел быть более конкретным с запросом.

Итак, как я могу это исправить, чтобы я мог щелкнуть Удалить div, принадлежащий div тестового идентификатора "parent-2"

Благодарю.


react-testing-library
person someuser2491    schedule 08.05.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Запросы библиотеки response-testing-library возвращают узлы DOM, поэтому вы можете использовать DOM API поверх. Вам понадобится что-то вроде этого:

utils.fireEvent.click(getByTestId('parent-1').querySelector('div'));

querySelector принимает селектор CSS, поэтому вы можете дать своему внутреннему div класс и быть более конкретным:

utils.fireEvent.click(getByTestId('parent-1').querySelector('.myClass'));

видеть:

Удачи с этим

person Florian Motteau    schedule 10.05.2020