Jest 로 프론트엔드 테스트 코드 작성하기

jest lifecycle : beforeEach(), afterEach()

jest lifecycle 함수를 사용하여 여러 개 테스트 함수에서 같은 컴포넌트를 사용해야 할 때 같은 환경을 render 하여 테스트할 수 있다.

기초 문법

describe() 는 테스트의 단위를 묶어주며, 묶은 단위의 설명을 기재해 준다. describe() 안에 describe() 를 작성할 수도 있다.

Mocking

Mock 의 사전적 의미는 ‘가짜’ 이다. Mocking 은 함수의 실행 결괏값을 내가 지정한 값으로 대체하는 작업을 의미한다.

✔️ jest.fn() 과 jest.spyOn()

가짜함수를 생성하는 jest.fn() 과 기존 함수의 작동은 유지하되 해당 함수의 결괏값을 가짜로 대체해주는 jest.spyOn() 이 있다.

두 가지 모두 가짜 값을 반환하고자 하는 목적은 같지만, jest.spyOn() 은 가짜 값을 생성하지 않으며, 해당 함수가 특정 인자로 호출되었는지 알아내는 등의 작업도 가능하다.

mock 함수는 테스트 중 특정 함수가 호출되었는지, 어떤 인자로 호출되었는지 mockFunction.mock 을 통해 저장한다.

const myMock = jest.fn();

myMock(); // 호출 1회
myMock(); // 호출 2회

expect(myMock).toHaveBeenCalled();      // ✅ 최소 1회 이상 호출되었는지 확인
expect(myMock).toHaveBeenCalledTimes(2); // ✅ 정확히 2회 호출되었는지 확인

✔️ toHaveBeenCalledTimes(n)

함수가 특정 횟수 만큼 호출되었는지 확인

const myMock = jest.fn();

myMock();
myMock();
myMock();

expect(myMock).toHaveBeenCalledTimes(3); // ✅ 호출 횟수가 3회인지 확인
expect(myMock).toHaveBeenCalledTimes(2); // ❌ 테스트 실패 (3번 호출되었기 때문)

✔️ toHaveBeenCalledWith(arg1, arg2, ...)

함수가 특정 인자와 함께 호출되었는지 확인

const myMock = jest.fn();

myMock('Hello', 42);

expect(myMock).toHaveBeenCalledWith('Hello', 42); // ✅ 테스트 통과
expect(myMock).toHaveBeenCalledWith('Bye', 99);   // ❌ 테스트 실패 (다른 인자로 호출됨)

✔️ fireEvent

사용자의 이벤트(클릭, 입력 등)를 시뮬레이션

import { render, screen, fireEvent } from '@testing-library/react';

test('버튼 클릭 시 onClick 함수가 호출되는지 확인', () => {
  const handleClick = jest.fn(); // 클릭 핸들러 mock 함수
  render(<button onClick={handleClick}>클릭</button>);

  const button = screen.getByRole('button', { name: /클릭/i });

  fireEvent.click(button);

  expect(handleClick).toHaveBeenCalledTimes(1); // ✅ 클릭 이벤트가 1번 발생했는지 확인
});

실제 사용

test('버튼 클릭 시 onClick 함수가 호출되는지 확인', () => {
    const handleClick = jest.fn(); // 클릭 핸들러 mock 함수
    render(<Button text="클릭하세요" onClick={handleClick} />);
    const buttonElement = screen.getByRole('button', { name: /클릭하세요/i });

    fireEvent.click(buttonElement);
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

1. jest.fn() 을 사용해서 가짜 함수를 만든다. 

2. @testing-library/react의 함수로 테스트 환경에서 리액트 컴포넌트를 렌더링한다. (Button 컴포넌트에 text="클릭하세요"와 onClick={handleClick}을 전달한다.) handleClick은 실제 함수가 아니라 jest의 mock function이므로 호출 여부만 추적됨

3. screen : 현재 렌더링된 DOM에서 요소를 찾을 수 있도록 해줌

4. .getByRole('button') : 역할(role)이 button인 요소를 찾음

5. { name: /클릭하세요/i } : 텍스트가 “클릭하세요”인 버튼을 찾음 (/클릭하세요/i: 대소문자 구분 없이(케이스 인식 X) 정규식으로 매칭)

6. fireEvent.click(buttonElement) : 버튼을 클릭하는 이벤트를 발생한다.

7. expect(handleClick) : handleClick 함수(Mock 함수)가 .toHaveBeenCalledTimes(1) : 정확히 1번 호출되었는지 확인한다.클릭을 한 번 했으므로 1번 호출되어야 하기 때문이다. 만약 2번 이상 호출되었다면 테스트 실패

 

머 이런 식으로 한당...

 

expect(handleClick).not.toHaveBeenCalled();

이건 비활성화된 버튼을 눌렀을 때 클릭 이벤트가 발생하지 않는지 확인할 때 사용하는 함수.

expect(buttonElement).toHaveClass('bg-white text-black');

올바른 스타일이 적용되는지 확인할 때 확인하는 방법.