Jest with React

React에서 Jest를 사용하기 위해서는 Babel을 이용해 몇 가지 설정을 해주어야 한다.

npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react

바벨 설정을 위해 babel.config.js파일을 생성하고 아래와 같이 설정해주자.

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
  ],
};

자바스크립트의 유명한 컨밴션에 따라 Jest는 __test__폴더에서 테스트 파일을 찾는다. 또는 .test.js과 같은 형식으로 작성해도 무방하다.

 

TDD는 개발자들 사이에서 상당이 핫한 주제이다. TDD란 함수를 작성하기 전에 어떻게 작동할지를 검증하는 테스트 코드를 먼저 작성한 뒤 코드를 작성하는 방식이다. 테스트를 하면서 본인이 작성할 코드에 대해 더 깊은 이해를 할 수 있다는 것이 TDD의 중요한 점이다. 리액트 컴포넌트를 작성할 때는 개인의 선호에 맞는 방식으로 진행해도 큰 상관은 없다.