使用笑话和酶测试 React hook 和是的验证

Question

我正在尝试测试这个表单组件（我使用了react-bootstrap作为UI）。

\n

const validationSchema = \n     Yup.object().shape({\n        username: Yup.string().required(),\n        password: Yup.string().required(),\n      })\n\nconst formOptions = { resolver: yupResolver(validationSchema) };\n\n  // get functions to build form with useForm() hook\n  const { register, handleSubmit, reset, formState } = useForm(formOptions);\n  const { errors } = formState;\n\n function onSubmit(data) {\n    console.log(JSON.stringify(data));\nreturn (\n      <div\n        data-test="reg-login-component"\n        className="bg-dark pt-4"\n        style={{ height: "100vh" }}\n      >\n        <Card style={{ width: "50vw", margin: "auto" }}>\n          <Card.Body>\n            <Card.Title>Login</Card.Title>\n            <Form noValidate onSubmit={handleSubmit(onSubmit)}>\n           \n              <Form.Row>\n                <Form.Group as={Col} md="12" sm="12" xs="12">\n                  <Form.Label>UserName</Form.Label>\n                  <Form.Control\n                    name="username"\n                    type="text"\n                    {...register("username")}\n                  />\n                  <Card.Subtitle className="mb-2 text-danger mt-0">\n                    {" "}\n                    {errors.username?.message}\n                  </Card.Subtitle>\n                </Form.Group>\n              </Form.Row>\n              <Container fluid className="pr-0 pl-0">\n                <Form.Row>\n                  <Form.Group as={Col}>\n                    <Form.Label>Password</Form.Label>\n                    <Form.Control\n                      name="password"\n                      type="password"\n                      {...register("password")}\n                    />\n                    <Card.Subtitle className="mb-2 text-danger mt-0">\n                      {" "}\n                      {errors.password?.message}\n                    </Card.Subtitle>\n                  </Form.Group>\n                </Form.Row>\n              </Container>\n              <Button variant="primary" type="submit">\n                Submit\n              </Button>\n            </Form>\n          </Card.Body>\n        </Card>\n      </div>\n)};\n\nRegistration.test.js\n\n\nEnzyme.configure({ adapter: new EnzymeAdapter() });\n\nconst setup = ()=> {\n  return mount(<Registration  />);\n};\n\ndescribe("Checking valid inputs", () => {\n  it("submits input values", async () => {\n    const onSubmit = jest.fn();\n    const handleUserData = jest.fn();\n\n    const rendered = setup();\n\n  \n    await act(async () => {\n      rendered\n        .find('input[name="username"]')\n        .simulate("input", { value: "harshitsankhala" })\n        .simulate("blur");\n    });\n   \n  \n    await act(async () => {\n      rendered.find("form").simulate("submit");\n    });\n\n    expect(onSubmit).toHaveBeenLastCalledWith(\n      expect.objectContaining({\n        username: "harshitsankhala",\n      })\n    );\n  });\n});\n

\n

运行 npm test 时出现此错误 ->

\n

   Checking valid inputs\n    \xc3\x97 submits input values (81 ms)\n\n  \xe2\x97\x8f Checking valid inputs \xe2\x80\xba submits input values\n\n    expect(jest.fn()).toHaveBeenLastCalledWith(...expected)\n\n    Expected: ObjectContaining {"username": "harshitsankhala"}\n\n    Number of calls: 0\n\n      58 |     });\n      59 |\n    > 60 |     expect(onSubmit).toHaveBeenLastCalledWith(\n         |                      ^\n      61 |       expect.objectContaining({\n      62 |         username: "harshitsankhala",\n      63 |       })\n

\n

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

\n

如何解决此问题??\nor\n如何使用酶和玩笑执行反应挂钩形式测试和 yup 验证

\n

Answer 1

你可以使用 jest 来做到这一点：

const name = await mySchema.isValid({name: 'test'});
expect(desc).toEqual(false);

/sf/answers/5415691711/