[테스트 코드] userEvent

1. userEvent

• userEvent는 fireEvent를 사용해 제작되었음
• userEvent의 내부 코드 : fireEvent를 사용하면서 엘리먼트의 타입에 따라서 적절한 반응을 보여줌
• 실제 사용하는 유저가 보기에 버튼을 클릭하는 행위가 더 잘 표현되기 때문에 UserEvent를 사용하는 것이 추천되는 방법

// fireEvent
import LoginForm from "./LoginForm";

test("enables button when both email and password are entered", () => {
  render(<LoginForm />);

  const email = screen.getByLabelText("이메일");
  const password = screen.getByLabelText("비밀번호");
  const button = screen.getByRole("button");

  expect(button).toBeDisabled(); // 버튼 비활성화

  fireEvent.change(email, { target: { value: "user@test.com" } });
  fireEvent.change(password, { target: { value: "Test1234" } });

  expect(button).toBeEnabled(); // 버튼 활성화
});

// userEvent
import React from "react";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import LoginForm from "./LoginForm";

test("enables button when both email and password are entered", () => {
  render(<LoginForm />);

  const email = screen.getByLabelText("이메일");
  const password = screen.getByLabelText("비밀번호");
  const button = screen.getByRole("button");

  expect(button).toBeDisabled(); // 버튼 비활성화

  userEvent.type(email, "user@test.com");
  userEvent.type(password, "Test1234");

  expect(button).toBeEnabled(); // 버튼 활성화
});