如何使用 data-testid 测试没有标签的 MUI 复选框？

Question

我想测试一个没有标签的复选框。关键是还有其他复选框，所以我不能使用 getByRole。

我尝试过使用 data-testid，但显然它不起作用。

我应该如何检查该复选框是否已选中 (toBeChecked())？

<Checkbox
  data-testid={item?.id}
  key={item?.id}
  id={item?.id.toString()}
  color="secondary"
  checked={item?.checked}
  disabled={hasAll}
  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
    if (item) {
      item.checked = e.target.checked;
      setFinalData(updateItemInArray(finalData, {
        item,
        index,
      }));
    }
  }}
/>

Answer 1

执行此操作的正确方法是在您的复选框中添加一个 aria-label，以便屏幕阅读器能够正确宣布：

<Checkbox inputProps={{ 'aria-label': 'Select row 1' }} />

这样，您就可以在测试中使用 getByLabelText。

select

如果你想使用data-testid，你可以像aria-label一样把它放在复选框上：

<Checkbox inputProps={{ 'data-testid': 'checkbox1' }} />

请注意，如果您使用的是 Typescript，则必须将 inputProps 转换为 React.InputHTMLAttributes<HTMLInputElement>，因为数据属性不是 InputHTMLAttributes 的一部分：

<Checkbox inputProps={{ 'data-testid': 'checkbox1' } as React.InputHTMLAttributes<HTMLInputElement>} />

如何使用 data-testid 测试没有标签的 MUI 复选框？

How can I test a MUI check box with no label using data-testid?

testing

checkbox

material-ui

react-testing-library