如何使用反应测试库从父元素访问子元素？

Question

我有dom像这样

<label value="false" data-testid ="source" class="StyledSwitch">
    <input type="checkbox" name="source" >
    <i class="ball-container"></i>
    <span class="label" data-enabled="On" data-disabled="Off"></span>
</label>

我如何使用带有 data-tesid 源的标签访问输入元素

我试过类似下面的方法，

const element = screen.getByTestId('source').firstChild();

但这会给出错误“对象可能为空”无法调用可能为空的对象。如何解决这个问题

有人可以帮我解决这个问题吗？谢谢。

Answer 1

const element = getByTestId('source').firstChild;

Answer 2

您可以使用 querySelector select 输入，如下所示：

const element = screen.getByTestId('source').querySelector('input');

if(element) {
    /// Do something...
);

Answer 3

我建议使用查询选择器：

const element = getByTestID('').firstchild;