javascript - 使用 react-testing-library 按 Angular 色测试 material-ui TextField

Question

我有一些组件，其中包括一些 mui TextFields，我的组件有两种情况:

1. 一个 TextField 是为 LicenseCode 设计的，它不能有标签。

2. 还有一些 TextFields 将通过 map 函数创建，而且我不能为它们中的每一个都使用标签。

所以，我不能使用 getByRole 来测试它们。为了在 testing 中缓解这种情况，我尝试了一些解决方案，但我认为应该有更好的方法。这些是我建立的解决方案:

1. 我已经禁用了 eslint 并为此使用了 documentQuerySecletor。

  /*eslint-disable */
  const activationCodeInputs = document.querySelectorAll('.codeItem input');
  expect(activationCodeInputs).toHaveLength(5);

  const systemIdTextarea = document.getElementById('systemId');
  expect(systemIdTextarea).not.toBeNull();
  /*eslint-enable */

1. 此外，找到一篇使用data-testid 的文章，并通过inputProps 将其传递给TextField

// code
<TextField
 inputProps={{ 'data-testid': 'activationCode' }}
/>

 <TextField
  inputProps={{ 'data-testid': 'systemId' }}
 />

// tests
const activationCodeInputs = screen.getAllByTestId('activationCode');
expect(activationCodeInputs).toHaveLength(5);

const systemIdTextarea = screen.getByTestId('systemId');
expect(systemIdTextarea).toBeInTheDocument();

因为它只是一个文本字段，它是一个常规元素，我是否必须像文档所说的第一个preferred way那样用getByRole 编写测试？ ，是吗？

Answer 1

对于 Material UI 和 React 测试，我只是在文本字段上使用了一个标签，并使用 getByLabelText 进行测试以获取带有该标签的输入

 <TextField
   label="input label"
   variant="outlined"
 />


screen.getByLabelText(/^input label/i)