리액트 앱 단위테스트 해보기 (1) - with create react app(CRA)

이전 회사에서 자동화 테스트를 도입하기 전, 엑셀 시트에 작성된 테스트 케이스를 보며 일일이 매뉴얼 테스트를 했던 경험이 있다.

이 경험은 썩 좋지 않았다. 서비스가 변경될 때마다 테스트 케이스를 변경해 줘야 했고

업데이트될 때마다 테스트를 일일이 수행하는 건 상당한 번거로움이 있었다 🤕

 

그리고 매뉴얼 테스트만 진행할 경우 파생되는 다른 에러를 잡기에는 분명 어려움이 있을 것이다... 

 

그렇기에 자동화된 테스팅을 도입하면 언급된 문제점들을 어느정도 보완해줄 수 있고 자동 테스트와 매뉴얼 테스트를 함께 진행하면 품질이 더 우수해질 것이다.

 

 

---

 

단위 테스트란?

---

🤔  흔히 테스트의 종류는 세 가지로 분류되는 듯하다.

 

1) 단위 테스트: 모듈 테스트라고도 한다. 하나의 기능을 테스트한다고 보면 되며 단위는 함수, 컴포넌트가 될 수 있다.

2) 통합 테스트: 모듈을 통합하는 과정에서 모듈간 호환에 문제가 없는지 테스트하는 것이다. 단위 테스트의 단위들이 합쳐질 때 문제가 없는지 확인하는 것이다.

3) End to End 테스트: 사용자 관점 테스트라고 생각하면 된다. 전체 워크플로우를 시나리오에 따라 테스트하는 것이다.

 

 

따라서 단위테스트는 가장 작은 단위의 테스트이고 

리액트 앱에서 테스트 코드를 작성하여 이를 자동화할 수 있는데 이에 대한 방법을 알아보고자 한다! 👍🏻

 

 

 

CRA (create-react-app) 로 테스트코드 작성 시작하기

---

🤔  create-react-app으로 리액트 앱을 만들면 기본적으로 test가 실행 가능하다.

root에서 npm test 명령어를 실행하면 아래와 같은 결과를 얻을 수 있다.

테스트는 App.test.js에 있는 테스트 하나가 진행됐고 성공했다.

 

 

위 사진을 보면 App.test.js에 있는 테스트가 실행됐다는 것을 알 수 있으므로 해당 코드를 살펴보자.

// App.test.js
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

 

- render(<App />) : App 컴포넌트를 가상의 screen에 그린다. Test하기 위한 대상을 준비시켜 둔 것이다.

- screen.getByText(/learn react/i) : 가상의 screen에 'learn react' 텍스트를 가진 Element를 반환한다.

- expect(linkElement).toBeInTheDocument() : linkElement가 현재 그려진 Document에 있는지 없는지 확인한다. App 컴포넌트에 'learn react' 텍스트를 그려준 Element가 있는지 확인하는 것.

 

=> 결과적으로 App을 Render했을 때 screen에 'learn react' 텍스트가 있을 경우 테스트가 성공하게 되며 'learn react' 텍스트를 다르게 고치면 테스트가 fail되는걸 확인할 수 있다.

 

 

 

Jest와 react testing library는?

---

🤔  create-react-app을 했을 때 Jest와 react testing library 두가지 툴이 자동으로 설치된 것을 확인할 수 있다.

 

그렇다면 차이점은 무엇일까?

 

1) JEST: 자바스크립트 테스트 도구이다. 테스트 코드를 실행하고 결과를 확인하는 것이며 대상은 주로 함수, 로직이 된다.

test('two plus two is four', () => {
  expect(2 + 2).toBe(4); // expectation과 Matcher(여기선 toBe(4))
});

 

2) React Testing Library: 리액트 앱 컴포넌트를 렌더링하고 시뮬레이팅하는 것을 지원한다.

앞서 언급한 App.test.js의 테스트처럼 단순 텍스트가 화면에 보여지는지를 테스트할 수도 있지만 유저의 Act, 상호작용에 대한 테스트도 지원한다.

 

 

 

---

 

 

우선 이번 게시물에는 리액트 컴포넌트 단위테스트 코드가 어떻게 작성됐는지 맛을 봤다.

다음 게시물에는 본격적으로 테스트 코드를 어떻게 작성할 수 있는지의 내용을 담아야 겠다!! 🤠

 

 

 

Jest 공식 Document: https://jestjs.io/docs/getting-started

Getting Started · Jest

React Testing Library 공식 Document: https://testing-library.com/docs/react-testing-library/intro

React Testing Library | Testing Library