问题描述
我在反应中使用Form。它具有卡号字段。因此,如果用户输入“ 333”并进入标签,则会显示一条动态消息,提示“卡号必须为16位数字”。
我正在使用@testing-library/react@9.5.0
和ts-jest@26.3.0
编写测试。
表单组件:
CardForm.ts
用户React-text-mask,Material UI显示一个输入,该输入通过一个模式进行验证,该模式具有一种方法来查看输入值是否为16,并返回一个错误,然后将其显示为辅助文本。
<form onSubmit={handleSubmit}>
<FormInput
name="cardNumber"
label="Card Number"
inputMode="numeric"
value={values.cardNumber}
placeholder="XXXX-XXXX-XXXX-XXXX"
validation={validationSchema.cardNumber}
mask={formMasks.cardNumber}
/>
<Button
type="submit"
disabled={!values.card || validationSchema.cardNumber.errors.length === 0}
>
CONFIRM CARD
</Button>
</form>
CardForm.test.tsx
import React from 'react';
import { render,fireEvent,screen } from '@testing-library/react';
import { CardForm } from '../components/Forms/CardForm';
const setup = () => {
const utils = render(<CardEmailForm />);
const input = utils.getByPlaceholderText('XXXX-XXXX-XXXX-XXXX');
return {
input,...utils,};
};
test('show error message when card number entered is less than 16 digits',async () => {
const { input,...utils } = setup();
fireEvent.change(input,{
target: { value: '333' },// I am giving the value 333 to the input
});
expect((input as HTMLInputElement).value).toBe('333 - - - '); //works
/* if I lose focus from the input,the error message shows up as helper text at the bottom of the input as shown above */
fireEvent.blur(input);
/* Now I am just expecting to read the error from the DOM based on h6 helper text,but this keeps giving me ERROR. */
expect(await utils.getByRole('heading')).toHaveTextContent(
'Card Number should be 16 numbers'
);
});
错误!
> 29 | await screen.getByRole('heading');
| ^
30 | expect(screen.getByRole('heading')).toHaveTextContent(
31 | 'Card Number should be 16 numbers'
32 | );
at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:34:12)
at getMultipleElementsFoundError (node_modules/@testing-library/dom/dist/query-helpers.js:21:35)
有人可以帮我写Expect语句,以便一旦输入错误然后模糊,我就能从屏幕上读取错误了?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)