reactjs 材料ui的React测试库文本输入

j2cgzkjk  于 2023-03-17  发布在  React
关注(0)|答案(3)|浏览(153)

我的文本输入是:

<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
/>;

和用户界面:

如何在React测试库中更改此文本元素的值?

63lcw9qa

63lcw9qa1#

在我的情况下,它是这样工作的

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');
});
vsnjm48y

vsnjm48y2#

我不认为通过显示值获取输入是个好主意,因为如果那样做,整个测试就会失败,相反,你应该获取输入字段的标签。

screen.getByLabelText(/^label/i)

更新

刚刚意识到我的方法只有在你在文本字段中包含一个id并且ID必须和名字匹配的情况下才有效。这似乎是通过Material UI获取输入的首选方法,因为你不需要包含一个test-id或者通过值。

<TextField
    name={name}
    id={name}
    label={label}
    {...otherProps}
/>
bz4sfanl

bz4sfanl3#

我经常很难让Material UI和reaction测试库正常工作,但是如果你知道你的“食谱”,它总是一样的。
下面是一个TextField的示例

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
干杯托马斯

相关问题