프론트엔드 단위 테스트

프론트엔드에서의 단위 테스트는 UI 컴포넌트 , 상태 관리 등이 정상적으로
동작하는 지 검증하는 용도로 사용되고 있다.
그렇다면 어떻게 단위 테스트를 할 수 있을까??

---

필요한 라이브러리

• @testing-library/jest-dom
• @testing-library/react
• @testing-library/user-event

우선 단위 테스트를 도와주는 도구들을 다운 받는다.

jest는 단위 테스트에서 많이 사용되는 테스트 프레임워크이다.

이후 package.json 파일에 jest를 설정해주면 된다.

 "jest": {
    "moduleNameMapper": {
      "^@/(.+)": "<rootDir>/src/$1"
    }
  }

---

예시 코드

import {fireEvent, screen} from '@testing-library/react';
import {renderWithRouter} from '../utils/test/renderWithRouter';
import {JoinForm} from './JoinForm';
describe('JoinForm', () => {
  // 렌더링 검사
  test('잘 렌더링된다.', () => {
    renderWithRouter(<JoinForm />);
    expect(
      screen.getByLabelText('이메일', {selector: 'input'}),
    ).toBeInTheDocument();
    expect(
      screen.getByLabelText('비밀번호', {selector: 'input'}),
    ).toBeInTheDocument();
    expect(
      screen.getByLabelText('비밀번호 확인', {selector: 'input'}),
    ).toBeInTheDocument();
    expect(
      screen.getByText('회원가입', {selector: 'button'}),
    ).toBeInTheDocument();
    expect(screen.getByText('로그인하기', {selector: 'a'})).toBeInTheDocument();
  });
  // 버튼 콜백
  test('회원정보를 입력하고 회원가입 버튼을 누르면 onSubmit 콜백이 호출된다.', () => {
    const onSubmit = jest.fn();
    renderWithRouter(<JoinForm onSubmit={onSubmit} />);
    fireEvent.change(screen.getByLabelText('이메일'), {
      target: {value: 'foo@example.com'},
    });
    fireEvent.change(screen.getByLabelText('비밀번호'), {
      target: {value: '1234'},
    });
    fireEvent.change(screen.getByLabelText('비밀번호 확인'), {
      target: {value: '1234'},
    });
    screen.getByText('회원가입', {selector: 'button'}).click();
    expect(onSubmit).toBeCalledWith({
      email: 'foo@example.com',
      password: '1234',
    });
  });
  // 링크에 의한 이동
  test('로그인하기 버튼을 누르면 로그인 URL로 이동한다.', () => {
    renderWithRouter(<JoinForm />);
    fireEvent.click(screen.getByText('로그인하기'));
    expect(window.location.pathname).toBe('/login');
  });
  // 입력 일치 검사
  test('비밀번호 확인을 다르게 입력하면 alert 창이 뜨고 onSubmit 콜백이 호출되지 않는다.', () => {
    const alertSpy = jest.spyOn(window, 'alert');
    const onSubmit = jest.fn();
    renderWithRouter(<JoinForm onSubmit={onSubmit} />);
    fireEvent.change(screen.getByLabelText('이메일'), {
      target: {value: 'foo@example.com'},
    });
    fireEvent.change(screen.getByLabelText('비밀번호'), {
      target: {value: '1234'},
    });
    fireEvent.change(screen.getByLabelText('비밀번호 확인'), {
      target: {value: '123456'},
    });
    screen.getByText('회원가입', {selector: 'button'}).click();
    expect(alertSpy).toBeCalledWith('비밀번호가 일치하지 않습니다.');
    expect(onSubmit).not.toBeCalled();
  });
});

위의 코드는 회원가입 동작에 대한 테스트 코드이다.
코드를 잘보면 알겠지만 렌더링 검사 , 버튼 콜백 등등 다양한 부분을 체크하고 있다.

즉 컴포넌트가 올바르게 렌더링되며 해당 기능들이 정상적으로 동작하는 지 확인하는 코드이다.
npm test 명령어를 통해 만약 문제가 있다면 어디가 문제인지 확인이 가능하다.

문제가 있을 시 예시

---

🤔후기

솔직히 예전에는 테스트 코드를 꼭 작성해야 하나??
어차피 빌드하거나 실행해보면 발견하는 거 아닌가라는 생각이 강했는데
사전에 오류를 발견하고 해결하는 것이 중요하다는 것을 깨닫게 되었다!!
아직은 jest 사용이 어색하지만 조금씩 사용해가면서 익숙해지도록 해봐야겠다