时间戳

首页 > 解决方案 > 如何使用反应测试库获取具有某些测试 ID 的父 div 的子 div？

react-testing-library - 如何使用反应测试库获取具有某些测试 ID 的父 div 的子 div？

问题描述

我想用一些 test-id 获取父元素中的 div 元素

我想做什么？

我有一个带有 test-id“parent-2”的父 div，它里面有一个 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 代码中，我想点击 Remove div from div with parent test-id = "parent-2"

我试过像下面那样做

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

这会引发错误，发现多个 Remove 实例。

我也试过这个 utils.fireEvent.click(getByTestId('parent-2').children[0];

这行得通。但这会访问父母的第一个孩子。但是希望对查询更具体。

那么我该如何解决这个问题，以便我可以单击删除 div 属于 test-id “parent-2”的 div

谢谢。

标签： react-testing-library

解决方案

react-testing-library 查询返回 DOM 节点，因此您可以在顶部使用 DOM API。你需要这样的东西：

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

querySelector 采用 CSS 选择器，因此您可以给您的内部 div 一个类并且更具体：

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

看：

推荐阅读