[Test Code] beforeEach()를 활용한 Jest 성공 케이스 작성

성공 케이스 작성

이전 게시글에서 회원가입 시 비밀번호와 비밀번호 확인의 값이 달라 실패하는 케이스를 작성했다.

이번에는 비밀번호와 비밀번호 확인의 값이 같을 때 회원가입 버튼이 활성화되는 케이스를 작성해보자.

 

이전 게시글의 given(회원가입 페이지가 그려진다)는 동일하고, when과 then만 수정해주면 된다.

when은 비밀번호와 비밀번호 확인의 값이 일치할 때로, then은 회원가입 버튼이 활성화되는 것으로!

 

이 때 beforeEach를 사용하면 더 간단해진다.

beforeEach는 각 describe의 it 또는 test가 동작하기 전에 동작하는 함수였다.

given을 beforeEach로 감싸주고 각 test만 진행하면 된다.

describe("회원가입 테스트", () => {
  beforeEach(() => {
    const routes = [
      {
        path: "/signup",
        element: <SignupPage />,
      },
    ];

    const router = createMemoryRouter(routes, {
      initialEntries: ["/signup"],
      initialIndex: 0,
    });

    render(
      <QueryClientProvider client={queryClient}>
        <RouterProvider router={router} />
      </QueryClientProvider>
    );
  });
  
  test("비밀번호와 비밀번호 확인 값이 일치하지 않으면 에러메세지가 표시된다", async () => { 
  ...
  
  test("이메일을 입력하고, 비밀번호와 비밀번호 확인값이 일치하면 회원가입 버튼이 활성화된다", async () => {
  ...

 

 

더불어 비밀번호와 비밀번호 확인의 값이 '일치'하면 회원가입 버튼이 활성화 되는 것이기 때문에, 그 전에 '불일치'라면 회원가입 버튼이 비활성화 되어 있다는 것을 검증해야 한다.

// given - 회원가입 페이지가 그려짐
const signupButton = screen.getByRole("button", { name: "회원가입" });
expect(signupButton).toBeDisabled();

 

button을 찾고 button의 텍스트 또는 aria-label 속성이 회원가입인 요소를 찾는다.

이 요소는 회원가입 페이지가 그려질 때 toBeDisabled, 즉 비활성화 상태인지 검사한다.

 

// when - 이메일 입력, 비밀번호, 비밀번호 확인 일치
    const emailInput = screen.getByLabelText("이메일");
    const passwordInput = screen.getByLabelText("비밀번호");
    const confirmPasswordInput = screen.getByLabelText("비밀번호 확인");

    fireEvent.change(emailInput, {
      target: { value: "button-activated@email.com" },
    });
    fireEvent.change(passwordInput, { target: { value: "password" } });
    fireEvent.change(confirmPasswordInput, {
      target: { value: "password" },
    });

 

회원가입이 진행되려면 이메일, 비밀번호, 비밀번호 확인이 모두 작성되어야 하고 비밀번호와 비밀번호 확인의 값이 같아야 한다. 이전 게시글과 거의 똑같은 구조이기 때문에 자세한 설명은 생략한다.

 

이제 email을 작성했고, passwordInput과 confirmPasswordInput의 값이 일치하는 상황이 됐다.

 

 // then - 회원가입 버튼 활성화
    expect(signupButton).toBeEnabled();

 

이런 상황이 될 때 아까 given에서 disabled한지 검증한 부분이 위 조건에서는 활성화 되도록 toBeEnabled 해준다.

 

---

참고 강의

2시간으로 끝내는 프론트엔드 테스트 기본기 | 강병진 - 인프런