测试失败，因为 React 测试库中的 object 不正确

Question

要测试的组件-

import { useState } from "react";

const UserForm = ({ onUserAdd }) => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    onUserAdd({ name, email });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name</label>
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </div>
      <div>
        <label>Email</label>
        <input value={email} onChange={(e) => setEmail(e.target.value)} />
      </div>
      <button onClick={handleSubmit}>Add User</button>
    </form>
  );
};

export default UserForm;

失败的测试用例-

test("it calls onUserAdd when the form is submitted", async () => {
  // BETTER IMPLEMENTATION
  const mock = jest.fn();

  // Render - the component
  render(<UserForm onUserAdd={mock} />);

  // Find 2 inputs (name, email in this case)
  const [nameInput, emailInput] = screen.getAllByRole("textbox");

  // Simulate typing in a name
  await user.click(nameInput);
  await user.keyboard("jane");

  // Simulate typing in a email
  await user.click(emailInput);
  await user.keyboard("abc@abc.com");

  // Find the submit button
  const button = screen.getByRole("button");

  // Simulate clicking the submit button
  await user.click(button);

  // Assertion - make sure 'onUserAdd' gets called with name/email
  expect(mock).toHaveBeenCalled();
  expect(mock).toHaveBeenCalledWith({ name: "jane", email: "abc@abc.com" });
});

错误 -

- Expected
+ Received

  Object {
-   "email": "abc@abc.com",
-   "name": "jane",
+   "email": "",
+   "name": "",
  },

让我知道我在这里做错了什么。

Codesandbox 链接- https://codesandbox.io/s/morning-microservice-xxh0mw?file=/src/UserForm.test.js

PS -因为我正在学习反应测试，所以我对每个事件都使用await ，让我知道这是否也是一种正确的方法。 谢谢。

Answer 1

通常看起来不错，但我发现 CodeSandbox 在处理 React 测试库时确实存在问题。 我用user.type替换了你的user.click s 和user.keyboard s，我发现它更易于阅读和简洁，而且它似乎有效：

test("it calls onUserAdd when the form is submitted", async () => {
  const mock = jest.fn();

  // Render - the component
  render(<UserForm onUserAdd={mock} />);

  // Find 2 inputs (name, email in this case)
  const [nameInput, emailInput] = screen.getAllByRole("textbox");

  // Simulate typing in a name
  await user.type(nameInput, "jane"); // <--here-<<

  // Simulate typing in a email
  await user.type(emailInput, "abc@abc.com"); // <--and here-<<

  // Find the submit button
  const button = screen.getByRole("button");

  // Simulate clicking the submit button
  await user.click(button);

  // Assertion - make sure 'onUserAdd' gets called with name/email
  expect(mock).toHaveBeenCalled();
  expect(mock).toHaveBeenCalledWith({ name: "jane", email: "abc@abc.com" });
});

是的，您是正确的，我await每个用户操作。 尽管 RTL 文档建议使用新的设置const user = userEvent.setup()而不是直接调用 API