Jest를 활용하여 로그인 테스트코드 작성하기

1. jest 환경 설정

npm install --save-dev jest @types/jest ts-jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom

 

npm --save-dev babel-jest @babel/core @babel/preset-env

 

babel.config.cjs

module.exports = {
    presets: [
        ['@babel/preset-env', {targets: {node: 'current'}}],
        '@babel/preset-typescript',
        ["@babel/preset-react", {"runtime": "automatic"}]
    ],
};

 

jest.config.cjs

module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'jest-environment-jsdom',
    transform: {
        '\\.[jt]sx?$': 'babel-jest',
    }
};

 

package.json

  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "unit-test": "jest --watchAll"
  },

 

이렇게 초기 파일 세팅을 해준다.

 

---

2. 테스트 코드 작성 파일 생성 규칙

• 테스트하려는 컴포넌트와 붙여서 생성한다.
  • 컴포넌트 응집도가 향상
  • 컴포넌트 소스코드 파악에 유리하다.

• 테스트용 파일 새로 생성(ex   __test__파일 생성)
  • 테스트 코드끼리 묶어서 관리

 

 

---

3. 테스트코드 작성

• describe로 각 테스트들을 묶고
• test나 it을 사용해서 각각의 테스트를 작성한다.
• given, when, then 순으로 테스트코드 흐름을 작성한다.

const queryClient = new QueryClient({
    defaultOptions:{},
})


describe("회원가입 테스트", ()=>{

    test("비밀번호와 비밀번호 확인 값이 일치하지 않으면 에러메세지가 표시된다", async () => {
        // given - 회원가입 페이지가 그려짐

        const routes = [
            {
                path: "/signup",
                element: <SignupPage />,
            },
        ];

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

        render(
            <QueryClientProvider client={queryClient}>
                <RouterProvider router={router} />
            </QueryClientProvider>
        );
        
        // when - 비밀번호와 비밀번호 확인 값이 일치하지 않음

        // then - 에러메세지가 표시됨

    });

    test("이메일을 입력하고, 비밀번호와 비밀번호 확인값이 일치하면 회원가입 버튼이 활성화된다.", ()=>{
        //given -회원가입 페이지가 그려짐
        
                const routes = [
            {
                path: "/signup",
                element: <SignupPage />,
            },
        ];

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

        render(
            <QueryClientProvider client={queryClient}>
                <RouterProvider router={router} />
            </QueryClientProvider>
        );

        //when - 이메일 입력 비밀번호, 비밀번호 확인 일치

        //then - 회원가입 버튼 활성화


    })
});

 

 

• 여러 테스트코드에서 중첩되는 given이 있으면 이것을 beforeEach로 묶어 각 테스트 실행 전 함수를 실행되게 한다.

beforeEach(()=>{
    const routes = [
        {
            path: "/signup",
            element: <SignupPage />,
        },
    ];

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

    render(
        <QueryClientProvider client={queryClient}>
            <RouterProvider router={router} />
        </QueryClientProvider>
    );
})

 

 

---

4. 테스트 코드 완성

import '@testing-library/jest-dom'
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
import {createMemoryRouter, RouterProvider} from "react-router-dom";
import SignupPage from "../SignupPage.tsx";
import {fireEvent, render, screen} from "@testing-library/react";


const queryClient = new QueryClient({
    defaultOptions:{},
})
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 () => {
        // given - 회원가입 페이지가 그려짐

        // when - 비밀번호와 비밀번호 확인 값이 일치하지 않음

        const passwordInput = screen.getByLabelText("비밀번호")
        const confirmPasswordInput = screen.getByLabelText("비밀번호 확인");

        fireEvent.change(passwordInput, { target: { value: "password" } });
        fireEvent.change(confirmPasswordInput, {
            target: { value: "wrongPassword" },
        });

        // then - 에러메세지가 표시됨
        const errorMessage = await screen.findByTestId("error-message");
        expect(errorMessage).toBeInTheDocument();
    });

    test("이메일을 입력하고, 비밀번호와 비밀번호 확인값이 일치하면 회원가입 버튼이 활성화된다.", ()=>{
        //given -회원가입 페이지가 그려짐

        const signupButton = screen.getByRole("button", {name :"회원가입"});
        expect(signupButton).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" }});

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

    })
});