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

Question

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

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

У меня есть родительский div с идентификатором теста "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];

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

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

спасибо.

Answer 1

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

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

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

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

см. https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector, https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorall

Удачи с этим