作为一个新手，我正在学习写一些测试。
我构建了一个简单的组件，它有一个输入和一个按钮，在单击按钮后显示输入的文本
这就是

function Contact() {
  const [name, setName] = useState("");
  const [show, setShow] = useState(false);

  const handleSendContactRequest = (e) => {
    e.preventDefault();
    setShow(true);
  };

  return (
    <>
      <h1>Contact</h1>
      <span
        data-testid="message"
        style={{ visibility: show ? "visible" : "hidden" }}
      >
        {name} , check your inbox
      </span>
      <form action="">
        <input
          type="text"
          placeholder="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <button onClick={handleSendContactRequest}>Send contact request</button>
      </form>
    </>
  );
}

export default Contact;

字符串
我创建了一个测试来检查span最初是否隐藏，它是否通过，然后再创建一个测试来检查整个流程。

//this test passes. span is not visible
test("span should not be visiblet", () => {
  render(<Contact />);

  const span = screen.getByTestId("message");
  expect(span).not.toBeVisible();
});

test("should display name in the span after clicking the button", () => {
 render(<Contact />);

  const nameInput = screen.getByPlaceholderText("name");
  fireEvent.change(nameInput, { target: { value: "tom" } });

  const sendButton = screen.getByText("Send contact request");

  const hiddenSpan = screen.queryByText(
    "tom , check your account [email protected]"
  );
  expect(hiddenSpan).toBeNull(); // do not pass. spann is visible after fireEvent.change()

  fireEvent.click(sendButton);

  const spanElement = screen.getByText("tom , check your inbox");

  expect(spanElement).toBeVisible();

});

型
我写的测试正确吗？我不明白为什么span有内容后，fireEvent.change()时，以前的测试通过。