我在使用 React 测试库的 React 测试中没有收到任何数量的调用

Question

我使用反应测试库模拟了我的登录组件，执行了必要的“getBy”并使用 fireEvent 提交或单击提交按钮。我使用 onSubmit 函数渲染了组件，但它仍然没有被调用。

it("Calls onSubmit with username and Password when submitted", () => {
   const onSubmit = jest.fn();
   const { getByTestId, getByText } = render(
      <MemoryRouter>
           <Login onSubmit = {onSubmit} />
      </MemoryRouter>
      );
      const button = getByText("Login");
      const email = getByTestId("email");
      const password = getByTestId("password");
      const form = getByTestId("form-element");

    fireEvent.change(email, { target: { value: "Tolulope@gmail.com" } });
    fireEvent.change(password, { target: { value: "YummyPizza" } });
    fireEvent.click(button);

   expect(onSubmit).toHaveBeenCalledTimes(1);
   expect(onSubmit).toHaveBeenCalledWith({
      email: email.value,
      password: password.value,
});

 });

我试过了，但 fireEvent.submit 和 fireEvent.click 分别在表单和按钮上，但似乎都没有触发该功能。

这是我的登录组件的设置。

 <form data-testid="form-element" style={{width: "360px"}}>
    <Input data-testid= "email"    onChange={handleChange} value={email}   name='email' type='text' label='Email Address' icon = 'at' required/>
    <Input data-testid= "password"    onChange={handleChange} value={password} name='password' type='password' label='Password' icon = 'lock' required/>

    <ButtonAuth  className='text-xl text-white uppercase cursor-pointer  mt-1 block w-full h-12 outline-none border-none bg-green-500 mt-3' value='Login' type="submit" onSubmit={onSubmit} disabled={!enabled} />

</form>

Input 和 Button 都是组件，但可以重复使用 input 和 button 标签。

Answer 1

您必须在表单上触发提交事件。

it("Calls onSubmit with username and Password when submitted", () => {
  const onSubmit = jest.fn();
  const { getByTestId } = render(
    <MemoryRouter>
      <Login onSubmit={onSubmit} />
    </MemoryRouter>
  );

  const form = getByTestId("form-element");

  expect(onSubmit).not.toHaveBeenCalled();

  fireEvent.submit(form, {
    target: {
      values: {
        email: "Tolulope@gmail.com",
        password: "YummyPizza",
      },
    },
  });

  expect(onSubmit).toHaveBeenCalledTimes(1);
  expect(onSubmit).toHaveBeenCalledWith({
    email: "Tolulope@gmail.com",
    password: "YummyPizza",
  });
});