測試失敗，因為 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