使用 jest 和酶测试 React hook from 和 yup 验证

如何解决使用 jest 和酶测试 React hook from 和 yup 验证

我正在尝试测试此表单组件（我已将 react-bootstrap 用于 UI）。

const validationSchema = 
     Yup.object().shape({
        username: Yup.string().required(),password: Yup.string().required(),})

const formOptions = { resolver: yupResolver(validationSchema) };

  // get functions to build form with useForm() hook
  const { register,handleSubmit,reset,formState } = useForm(formOptions);
  const { errors } = formState;

 function onSubmit(data) {
    console.log(JSON.stringify(data));
return (
      <div
        data-test="reg-login-component"
        className="bg-dark pt-4"
        style={{ height: "100vh" }}
      >
        <Card style={{ width: "50vw",margin: "auto" }}>
          <Card.Body>
            <Card.Title>Login</Card.Title>
            <Form novalidate onSubmit={handleSubmit(onSubmit)}>
           
              <Form.Row>
                <Form.Group as={Col} md="12" sm="12" xs="12">
                  <Form.Label>UserName</Form.Label>
                  <Form.Control
                    name="username"
                    type="text"
                    {...register("username")}
                  />
                  <Card.Subtitle className="mb-2 text-danger mt-0">
                    {" "}
                    {errors.username?.message}
                  </Card.Subtitle>
                </Form.Group>
              </Form.Row>
              <Container fluid className="pr-0 pl-0">
                <Form.Row>
                  <Form.Group as={Col}>
                    <Form.Label>Password</Form.Label>
                    <Form.Control
                      name="password"
                      type="password"
                      {...register("password")}
                    />
                    <Card.Subtitle className="mb-2 text-danger mt-0">
                      {" "}
                      {errors.password?.message}
                    </Card.Subtitle>
                  </Form.Group>
                </Form.Row>
              </Container>
              <Button variant="primary" type="submit">
                Submit
              </Button>
            </Form>
          </Card.Body>
        </Card>
      </div>
)};

Registration.test.js


Enzyme.configure({ adapter: new EnzymeAdapter() });

const setup = ()=> {
  return mount(<Registration  />);
};

describe("Checking valid inputs",() => {
  it("submits input values",async () => {
    const onSubmit = jest.fn();
    const handleUserData = jest.fn();

    const rendered = setup();

  
    await act(async () => {
      rendered
        .find('input[name="username"]')
        .simulate("input",{ value: "harshitsankhala" })
        .simulate("blur");
    });
   
  
    await act(async () => {
      rendered.find("form").simulate("submit");
    });

    expect(onSubmit).toHaveBeenLastCalledWith(
      expect.objectContaining({
        username: "harshitsankhala",})
    );
  });
});

运行 npm test 时 收到此错误 ->

   Checking valid inputs
    × submits input values (81 ms)

  ● Checking valid inputs › submits input values

    expect(jest.fn()).toHaveBeenLastCalledWith(...expected)

    Expected: ObjectContaining {"username": "harshitsankhala"}

    Number of calls: 0

      58 |     });
      59 |
    > 60 |     expect(onSubmit).toHaveBeenLastCalledWith(
         |                      ^
      61 |       expect.objectContaining({
      62 |         username: "harshitsankhala",63 |       })

我使用此代码作为测试的参考->https://codesandBox.io/s/react-hook-form-enzyme-testing-example-5tn7i?from-embed=&file=/src/测试/app.test.js

如何解决这个问题？？ 要么 如何使用酶和 jest 执行 react-hook-form 测试和 yup 验证