Material-UI 表单和 React 测试库所需的表单字段答案

【问题标题】：Material-UI Form and React Testing Library Required Form FieldsMaterial-UI 表单和 React 测试库所需的表单字段
【发布时间】：2021-01-31 17:04:09
【问题描述】：

我有一个想要测试的 MUI 表单。所有表单字段都是必需的，我想使用 @testing-library/react 进行测试

这是表格：

<form id='xml-form' onSubmit={handleSubmit}>
      <div
        <FormControl required={true}>
          <InputLabel required={true}>Name</InputLabel>
          <Input
            id='firstName'
            data-testid='required-firstName'
            required={true}
          />
        </FormControl>
      </div>
      <div>
        <TextField
          id='lastName'
          data-testid='required-lastName'
          required
          label='Last Name'
          style={{ marginBottom: 15 }}
        />
      </div>
      <Button
        type='submit'
        form='xml-form'
        color='primary'
        variant='contained'
        style={{ marginBottom: 15 }}
      >
        Generate XML
      </Button>
    </form>

这是我测试它的方式：

test('All fields are required', () => {
  render(<XMLForm />);
    expect(
      getByTestId(document.documentElement, 'required-firstName')
    ).toBeRequired();
  expect(
    getByTestId(document.documentElement, 'required-lastName')
  ).toBeRequired();
});

测试在第一个表单域失败。无论我使用<TextField /> 还是<FormControl />，渲染的DOM 元素似乎都没有必填字段，我不知道为什么。

Received element is not required:
      <div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl" data-testid="required-firstName" required="" />

       7 |     expect(
       8 |       getByTestId(document.documentElement, 'required-firstName')
    >  9 |     ).toBeRequired();
         |       ^
      10 |   expect(
      11 |     getByTestId(document.documentElement, 'required-lastName')
      12 |   ).toBeRequired();

【问题讨论】：

看起来是来自<div class="MuiInputBase-root ..." /> 上的required 属性的问题，这与真正的<input /> 相比没有意义。但不知道你为什么这样做？

标签： reactjs forms material-ui react-testing-library

【解决方案1】：

使用<Input />或<TextField />时需要将data-testid传递给inputProps：

<form id='xml-form' onSubmit={handleSubmit}>
  <div
    <FormControl required={true}>
      <InputLabel required={true}>Name</InputLabel>
      <Input
        id='firstName'
        inputProps={{ 'data-testid': 'required-firstName' }}
        required={true}
      />
    </FormControl>
  </div>
  <div>
    <TextField
      id='lastName'
      inputProps={{ 'data-testid': 'required-lastName' }}
      required
      label='Last Name'
      style={{ marginBottom: 15 }}
    />
  </div>
  <Button
    type='submit'
    form='xml-form'
    color='primary'
    variant='contained'
    style={{ marginBottom: 15 }}
  >
    Generate XML
  </Button>
</form>

另外，我相信您可以使用getByLabelText() 查询。对于您感兴趣的两个元素，它将是：

test('All fields are required', () => {
  render(<XMLForm />);
  expect(
    getByLabelText(document.documentElement, 'Name')
  ).toBeRequired();
  expect(
    getByLabelText(document.documentElement, 'Last Name')
  ).toBeRequired();
});

【讨论】：