React 测试库：在 TestId 元素中获取子输入

Question

我有这样的结构：

<div data-test-locator="MyId">
    <input value="some" type="checkbox" checked />
</div>

我需要测试复选框是否被选中。但是我怎样才能首先得到它呢？我可以得到一个带有这样的测试 id 的元素： getByTestId('MyId') 但是我怎样才能得到它的子输入呢？

Answer 1

现在，我通过按值获取复选框解决了这个问题：

expect(getByDisplayValue('some').checked).toBeTruthy();

Answer 2

如果你知道结构不会改变，你可以使用firstChild

expect((getByTestId('MyId').firstChild).checked).toEqual(true)

Answer 3

使用querySelector我们不需要知道结构：

const input = screen
  .getByTestId('MyId')
  .querySelector('input')

expect(input.checked)
  .toBeTruthy()

React Testing Library: Get child input inside of TestId element