用于材料 ui 文本输入的 react-testing-library

Question

我的文本输入是

<TextField
      className={classes.textField}
      data-testid={name}
      variant="outlined"
      error={false}
      required
      onChange={element => {
        if (onTextChange) {
          onTextChange(name, element.target.value);
        }
      }}
      disabled={!editEnable}
      name={name}
      label={label}
      defaultValue={values}
      fullWidth
    />

和 UI 在此处输入图像描述

如何在反应测试库中更改此文本元素的值？

Answer 1

就我而言，它是这样工作的

it('should render input ', () => {
    const field  = screen.getByTestId('search-text-field').querySelector('input')
    expect(field ).toBeInTheDocument()

    fireEvent.change(field , {target: { value: 'some text'}});
    expect(field.value).toBe('some text');
});

Answer 2

我不认为通过显示值获取输入是一个好主意，因为如果改变整个测试就会失败。相反，您应该获取输入字段的标签。

screen.getByLabelText(/^label/i)

更新

刚刚意识到，只有在 TextField 中包含 id 并且该 ID 必须与名称匹配时，我的方法才有效。这似乎确实是通过 Material UI 获取输入的首选方式，因为您不需要包含测试 ID 或值。

screen.getByLabelText(/^label/i)

Answer 3

我经常很难让 Material UI 和反应测试库正常工作。但如果你知道你的“食谱”，它总是一样的。

这是一个文本字段的示例

import * as React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { TextField } from '@material-ui/core';

const inputMock = jest.fn();

const Test = () => (
  <TextField
    data-testid={name}
    variant="outlined"
    error={false}
    required
    onChange={inputMock}
    name={name}
    label={'label'}
    defaultValue={'4711'}
    placeholder={'Enter Number'}
    fullWidth
  />
);

test('Input', () => {
  const container = render(<Test />);

  const input = container.getByDisplayValue('4711') as HTMLInputElement;

  fireEvent.change(input, { target: { value: '42' } });
  expect(input.value).toBe('42');
  expect(inputMock.mock.calls).toHaveLength(1);
});

以下是使用哪些选择器的一些建议。所以你可以尝试一种“更好”的。 https://testing-library.com/docs/guide-which-query

干杯托马斯