[Jest] 00. Jest 시작하기

해당 글은 100% 정확한 글이 아닙니다. 저의 경험을 작성하는 것이며, 틀릴 수 있습니다. 
이점 참고 부탁드리며, 또한 지적을 환영합니다.

 

TDD(Test Driven Development) 한번쯤은 들어 본 경험이 있으시죠?

일반 적으로 많이 사용되는 방식인 개발 -> 테스트가 아닌 테스트 -> 개발하는 방식을 의미해요.

이런 기조들이 생기면서 Test에 대한 중요성이 많이 되었죠. 특히 에러를 미리 대비 할 수 있다는 점에서 선호되는 것 같아요.

 

Test를 하기 위해 사용 되는 라이브러리들 중, React로 유명한 Meta에서 개발한 Testing Library Jest에 대해 알아보는 글이에요.

Reat Native를 베이스로 Testing 글을 작성할 예정이니 참고 해주세요!

 

해당 글을 쓰게 된 이유는 Front 과제를 접하다가 요구조건에 테스팅이 있었고 그 덕분에 Jest를 만져볼 기회가 생겼어요.

하지만, Front Test에 대한 자료가 생각보다 적었고 그래서 꽤 오랜 기간 삽질 했는데, 저와 비슷한 분이 많이 계실꺼라 생각해 글을 작성하게 되었으니 도움이 되었으면 좋겠네요!

---

“Jest is a delightful JavaScript Testing Framework with a focus on simplicity.”

- Jest는 단순함에 중점을 둔 멋진 자바스크립트 테스트 프레임워크입니다.

 

Jest를 사용해보기 위해, 먼저 새 React Native Project를 만들어 볼까요?

React Native 내에는 Jest도 함께 포함되어 있어요.

npx react-native init test-learn

 

프로젝트 폴더에 들어가, jest.config.js 파일을 열어봅시다.

// jest.config.js

module.exports = {
  preset: 'react-native',
};

이 파일에서 Jest 설정을 할 수 있어요.

 

테스트는 프로젝트 내 __tests__ 폴더를 열면,  App.test.tsx 파일이 하나 있어요.

// __tests__/App.tset.tsx

import 'react-native';
import React from 'react';
import App from '../App';

// Note: import explicitly to use the types shipped with jest.
import {it} from '@jest/globals';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  renderer.create(<App />);
});

이 테스트는 App. tsx가 잘 렌더링이 되는지 확인하는 테스트입니다. 터미널에 아래와 같이 입력해서 테스트를 실행할 수 있어요.

 

npm run test
// 또는
yarn run test

test 결과

위와 같이 나온다면, 올바르게 테스트를 성공 한 거예요!

다음 글 부터 알아두면 좋은 Jest 옵션을 소개하고, 간단한 테스트를 만들어서 테스트 해볼게요.