React 测试库:输入字段未更新测试中的值

问题描述 投票:0回答:1

我正在使用一个自定义 React 组件,该组件将 Office UI Fabric TextField 包装在 Formik 表单中。尽管遵循使用 React 和 Formik 处理输入字段的典型模式,但我在使用 React 测试库测试组件时遇到了问题。在 Jest 中模拟更改事件后,输入的值不会更新。

这是我组件的相关部分:

const FMIconButtonTextField: React.FC<Props> = props => {
  const { label, styles, name, callOutSpanText } = props;
  const [isCalloutVisible, setIsCalloutVisible] = useState(false);
  const inputId = getId(name);
  const [field, { touched, error }] = useField(name);

  return (
    <>
      <TextField
        {...field}
        {...props}
        label={label}
        errorMessage={touched && error ? error : null}
        id={inputId}
      />
    </>
  );
};

这是我测试它的方法:

it('allows input into the voucher code field', async () => {
  const initialValues = { voucherCode: '' };
  const { container, findByDisplayValue } = render(
    <Formik initialValues={initialValues} onSubmit={jest.fn()}>
      <Form>
        <FMIconButtonTextField
          name="voucherCode"
          label="Voucher Code *"
          callOutSpanText="Voucher Code must contain at least 5 characters and no more than 20 characters, and is allowed A to Z, 0 to 9, and _."
          placeholder="Only A-Z or 0-9 or _"
        />
      </Form>
    </Formik>
  );

  const input = container.querySelector('input[name="voucherCode"]');
  fireEvent.change(input, { target: { value: 'ABC123' } });

  // Wait for React's state update to propagate
  await findByDisplayValue('ABC123'); // This ensures the input has received and displays the new value

  expect(input.value).toBe('ABC123');
});

尽管做出了这些努力,测试还是失败,输入值未更新:

expect(received).toBe(expected) // Object.is equality

Expected: "ABC123"
Received: ""
javascript reactjs jestjs react-testing-library formik
1个回答
0
投票

您的 CSS 查询选择器需要一个名为“vouchercode”的输入元素。但是,您将此道具传递给具有子输入的 a 。尝试更改您的查询以输入

*[name="voucherCode"] input
或类似的内容。

© www.soinside.com 2019 - 2024. All rights reserved.