jest와 react testing library로 프로젝트에 단위 테스트 도입하기

작성일을 기준으로 약 1달 전 hello, GSM이라는 광주 소프트웨어 마이스터고등학교 입학 지원 서비스를 일주일 정도 운영을 하였다 운영하면서 생긴 이슈들이 많아 서비스의 신뢰성과 안정성을 떨어뜨린 것도 또 사전에 테스트를 확실하게 했다면 방지할 수 있었던 문제라고 생각하여 아주 아쉬웠다. 그러던 와중에 팀원들과 프로젝트 회고를 진행하면서 팀원이 "서비스를 제작할 때 jest나 react testing library를 도입했었으면 좋았을 거 같아요"라고 말해서 jest, react testing library에 대한 사용 방법과 또 실제 프로젝트에 도입한 경험을 써보려고 한다.

테스트

테스트의 종류는 여러가지가 있지만 내가 지금 설명할 테스트는 단위(unit) 테스트이다.

여기서 말하는 단위는 하나의 함수나 모듈을 말한다.

예를 들어 전화번호를 입력했을때 '-'을 붙여서 반환하는 함수에 대한 독립적인 테스트도 단위테스트가 될 수 있다

 

jest

jest는 javascript 테스팅 프레임워크이다.

라이브러리가 아닌 프레임워크인 이유는 테스트를 하기 위해서 jest만 설치하면 되기 때문이다.

jest가 나오기 전까지는 test runner 라이브러리, test matcher 라이브러리 필요에 따라 테스트를 위한 추가적인 라이브러리를 설치해줬어야 됬는데 jest가 나오면서 하나만 설치하면 모든 기능을 사용할수 있게 지원한다.

※ test runner는 test 할 것을 실행시키는 역할을 하고 test matcher는 테스트 값을 비교하는 역할이다.

사용하기

※ 사용 환경은 node.js + pnpm 환경이다 만약 사용하는 환경(react, vue,angular)에 따라서 사용 방법이 다를 수 있다.

 

1. 디렉토리를 만들고 pnpm init을 해준다.

mkdir jest-practice

cd jest-practice

pnpm init

 

2. jest 설치 및 package.json에 script 추가해준다.

pnpm add -D jest

 

package.json script에 아래의 코드를 입력해준다.

 "scripts": {
    ...scripts, // 기존에 있던 스크립트들
    "test": "jest"
  },

 

 

3. test 파일을 만든다.

test 파일 형식은 [함수 이름].test.(js | ts) 형식으로 만든다.

 

3번까지 했다면 사전 세팅은 완료된것이다.

---

return 값이 원시(primitive) 타입인 경우

const add = (num1: number, num2: number) => num1 + num2;

test("primitive", () => {
  expect(add(1, 1)).toBe(2);
});

// expect(테스트할 함수).toXXX(기대 결과)

 

jest에서 원시값을 비교할 때는 toBe() test matcher를 사용하여 비교한다.

return 값이 참조(reference) 타입인 경우

const getUserInfo = (name: string, age: number) => ({ name: name, age: age });

test("reference", () => {
  expect(getUserInfo("gaoooon", 18)).toEqual({ name: "gaoooon", age: 18 });
});

 

 

참조값을 비교할 때는 toEqual() test matcher를 사용하여 비교한다.

 

 

참고 자료 - https://github.com/gaoooon/jest-practice

---

react testing library

react testing library는 react 컴포넌트 테스팅 라이브러리이다.

storybook과 비교

react testing library를 듣자마다 나는 이런 생각이 들었다.

"그러면 storybook이랑은 뭐가 다른거지? storybook도 똑같이 컴포넌트를 테스트 할수 있는데?"

 

찾아본결과 react testing library와 storybook은 서로 추구하는 방향성이 다른것 같았다

 

storybook은 문서화와 컴포넌트의 디자인이 의도한대로 퍼블리싱 되었는지, 상태에 따라 디자인이 어떻게 변경되는지 이런 UI를 중요하게 생각한다면 react testing library는 말 그대로 테스트(특정 props를 줬을때 작동하는지, 버튼을 클릭했을때 로직을 잘처리하는지)를 중요하게 생각하는것 같다. 결론은 두개의 역할이 다르다는 말이다

 

사용하기

사용방법은 위에서 알려준 jest 사용방법처럼 사용하면된다.

jest랑 같이 사용해야된다는 뜻이다.

 

1. 의존성 설치

pnpm add -D @testing-library/dom @testing-library/jest-dom @testing-library/react

 

2. test code 작성

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

const Button = ({ title }: { title: string }) => <button>{title}</button>;

test('컴포넌트 테스트', () => {
    const buttonText = '클릭하시오';

    const { container } = render(<Button title={buttonText} />); // render 함수로 컴포넌트 가상 돔에 렌더

    expect(container.firstChild?.textContent).toBe(buttonText); // container.firstChild로 렌더링한 컴포넌트 root 접근

    expect(container.firstChild).toBeInTheDocument(); // 가상 돔에 있는지 확인
  });

실제 프로젝트 적용

우리 학교에서는 아이디어 페스티벌이라는것을 진행하는데 아이디어 페스티벌 출품작으로 만들고 있는 서비스에 도입을 해봤다

레포 링크 - https://github.com/Team-RunningTomato/RunningHallae-PWA

GitHub - Team-RunningTomato/RunningHallae-PWA

장점

기존에는 예를 들어 A 컴포넌트를 제작한다고 했을때 흐름이

1. 컴포넌트 퍼블리싱
2. 기능 구현
3. 스토리북 등록
4. PR 생성

이런 흐름이었다. test를 한다고 하지만 막상 개발에 들어가면 빨리 끝낼생각에 테스트는 "음 잘 작동하네" 정도만 테스트 했었다.

하지만 unit test를 도입한후에는 test code 작성 단계가 한개 더 추가 되면서 강제로라도 테스트를 진행하게 되었다.

물론 unit test를 도입하지 않아도 문제가 없게끔 잘 테스트를 해야하지만 솔직히 말하면 귀찮다. 하지만 프로젝트에 개발 흐름에 강제로 추가하니 어느정도는 테스트를 하는것 같아서 나쁘지는 않은것 같다.

 

리뷰어 입장에서도 테스트를 진행할때 test code 실행만 시켜주면 되기 때문에 더 간편해지고 코드 검수에만 집중할수 있게된것 같다.

아쉬운점

jest의 장점 중 하나는 zero config, 따로 설정 파일을 만들어줄 필요가 없는것이 장점이다. 하지만 nextjs 환경에서는 jest.config 파일을 만들어줘야해서 살짝 아쉬웠다.

 

그리고 test code 작성을 많이 해본것이 아니라서 뭘 테스트 해야 될지도 잘모르겠고 또  내가 원하는 테스트를 코드로 작성하는것이 힘들었다. (많이 해봐야 할거 같고 다른 프로젝트를 참고 해봐야 할것 같다.)

 

단위 테스트 세팅 및 테스트 코드 작성 PR - https://github.com/Team-RunningTomato/RunningHallae-PWA/pull/3

마무리

항상 새로운 시도를 하는것은 어려운것 같다 이번에 jest와 react testing library를 도입할때 모르는 부분이 많았는데 주변 사람들에게 도움을 받을수 없는 상황이었어서 구글링하는데 애를 쓴것 같다. 하지만 코드의 안정성과 신뢰성을 챙길수 있을거 같아 그만한 가치는 있는것 같다.