3

嗨，我在组件中有一个输入字段，该组件用 react-hook-form 的控制器包装，并且该输入字段用 react-input-mask 包装以进行屏蔽。在用控制器包装输入字段之前，data-test-id 有效出色地 。打包后找不到了。在这里，我正在为此共享输入字段组件和测试文件。请帮助我。

             <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"
                        }
                      }}
                    />

在测试文件中：

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();
});

错误：

Unable to find an element by: [data-testid="dob-input"]

4

0 回答 0