[React] 단위 테스트 도구 Jest 살펴보기, 테스트 자동화

테스트 도구 사용 동기

혈당당 Frontend 개발을 맡으며, ESlint를 사용해도, API요청이 컨텍스트에 있을 경우, 실제 배포 후에야 확인하게 되는 오류가 많았다.
또한, 한 개의 컴포넌트를 페이지 단위로 작성해버리니 모듈화도 잘 안 되고, 오류 파악도 어려웠다.
이것은 클린코드에서 지향하는 코드와 거리가 멀다고 생각했다!

따라서 단위 테스트에 대해 더 공부해볼 필요를 느꼈다.
자료는 Udemy의 React 완벽 가이드를 참고했다.

테스트 도구의 종류

1. Jest : 브라우저 (특히 렌더링)를 시뮬레이션 하는 도구, 흔하게 사용함, CRA에 이미 설치 되어 있음
2. React Testing Library : CRA에 이미 설치 되어 있음
3. 기타 라이브러리

http://jstherightway.org/#testing-tools

Jest 사용해보기

세팅하기

• CRA는 별도의 세팅이 필요없다.
  create-react-app 으로 프로젝트를 만들면, 자동으로 내장 테스팅 도구들이 세팅되어 설치돼있다.
  setupTest.js 파일에 jest라이브러리 설정을 불러오고 있음을 확인할 수 있다.
  (App.test.js에는 test예시 코드가 적혀있음)

테스트 코드 작성하기

• 파일명 : {컴포넌트명}.test.js

import { render, screen } from "@testing-library/react";
import Greeting from "./Greeting";
test("renders Hello World", () => {
    // Arrange
    render(<Greeting />);

    // Act
    // ... nothing

    // Assert : 컴포넌트가 렌더링 됐는지, 텍스트 엘리먼트로 나왔는지, 가상DOM의 결과물 확인
    const helloWorldElement = screen.getByText("Hello World", { exact: false });
    expect(helloWorldElement).toBeInTheDocument();
});

• 문법
  test('테스트 실행시 콘솔 출력문', 익명함수)
• test 실행하기
  cmd에 npm start가 아닌 npm test 를 입력하면, Press a to run all tests. 가 뜬다. a 누르면 테스트 결과가 표시됨

* 테스트 코드 예시 구경하기 (2023. 5. 14 추가, 한글자동완성을 위한 정규식 라이브러리 소스의 test 코드)

클릭하면, 해당 레포로 이동합니다.

* 참고자료

 

Udemy의 React 완벽 가이드 강의

groom의 CLEAN CODE JAVASCRIPT
clean-code-typescript 🚿 타입스크립트를 위한 클린코드 - 한글 번역판