Reactjs 使用控制器包装后,测试文件中未识别数据testid?
嗨,我在一个组件中有一个输入字段,该字段由react钩子表单中的控制器包装,该输入字段由react输入掩码包装,用于屏蔽。在使用控制器包装输入字段之前,数据测试id工作良好。包装好后就找不到了。在这里我分享了输入字段的组件和测试文件。请帮助我Reactjs 使用控制器包装后,测试文件中未识别数据testid?,reactjs,react-testing-library,react-hook-form,Reactjs,React Testing Library,React Hook Form,嗨,我在一个组件中有一个输入字段,该字段由react钩子表单中的控制器包装,该输入字段由react输入掩码包装,用于屏蔽。在使用控制器包装输入字段之前,数据测试id工作良好。包装好后就找不到了。在这里我分享了输入字段的组件和测试文件。请帮助我 <Controller name="dob" control={control} as={
<Controller
name="dob"
control={control}
as={
<InputMask mask="9999-99-99" >
{() => (
<TextField
id="inputfive"
name="dob"
label={t("TXT.YOUR_LOAN_DETAIL_PAGE.DOB")}
placeholder={t("TXT.YOUR_LOAN_DETAIL_PAGE.DOB")}
data-testid="dob-input"
/>
)}
</InputMask>
}
rules={{
required: "this is required",
pattern: {
value: /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/,
message: "Please Enter a correct pattern"
}
}}
/>
(
)}
}
规则={{
必需:“这是必需的”,
模式:{
值:/([12]\d{3}-(0[1-9]| 1[0-2])-(0[1-9]|[12]\d | 3[01])/,
消息:“请输入正确的模式”
}
}}
/>
在测试文件中:
it("should not sumbit the form", async () => {
const onSubmit = jest.fn();
const { getByText, getByTestId } = render(<LinkApplication onSubmit={onSubmit} />);
const Dob_Input = getByTestId("dob-input");
const form = getByTestId("form");
act(() => {
fireEvent.change( Dob_Input , {
target: { value: "1995-09" }
});
});
expect(Dob_Input.value).toBe("1995-09");
await act(() => {
fireEvent.submit(form);
});
expect(onSubmit).not.toHaveBeenCalled();
});
it(“不应该对表单进行sumbit”,async()=>{
const onSubmit=jest.fn();
常量{getByText,getByTestId}=render();
const Dob_Input=getByTestId(“Dob Input”);
const form=getByTestId(“form”);
行动(()=>{
fireEvent.change(Dob_输入{
目标:{价值:“1995-09”}
});
});
期望值(Dob_输入值)。toBe(“1995-09”);
等待行动(()=>{
fireEvent.提交(表格);
});
expect(onSubmit).not.tohavebeincall();
});
错误:
无法通过以下方式找到元素:[data testid=“dob input”]