我正在使用一个自定义 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: ""
您的 CSS 查询选择器需要一个名为“vouchercode”的输入元素。但是,您将此道具传递给具有子输入的 a 。尝试更改您的查询以输入
*[name="voucherCode"] input
或类似的内容。