테스트

test("필수값이 비어 있으면 오류 메시지를 보여 준다", async () => {
  const user = userEvent.setup();
  render(<OrderForm onSubmit={vi.fn()} />);

  await user.click(screen.getByRole("button", { name: "주문하기" }));

  expect(await screen.findByText("받는 분을 입력해 주세요")).toBeInTheDocument();
});

test("입력 후 제출하면 값이 전달된다", async () => {
  const user = userEvent.setup();
  const handleSubmit = vi.fn();
  render(<OrderForm onSubmit={handleSubmit} />);

  await user.type(screen.getByLabelText("받는 분"), "홍길동");
  await user.click(screen.getByRole("button", { name: "주문하기" }));

  expect(handleSubmit).toHaveBeenCalledWith(
    expect.objectContaining({ receiver: "홍길동" })
  );
});

fireEvent보다 userEvent를 씁니다. 실제 사용자처럼 포커스와 키 입력 순서를 재현하므로, 그 과정에서만 드러나는 문제도 잡힙니다.