[JEST] 시작하기 설치 및 설정

서론

Jest 시작하기 시리즈 문서들은 TEST 도구인 JEST의 공식 홈페이지 문서를 번역하고 설명을 덧 붙인 문서입니다.

설치

* Yarn 을 이용한 설치
    * $ Yarn add —dev jest
* Npm 을 이용한 설치
    * $ npm install —save-dev jest

Note : 이 문서는 yarn command를 사용하지만, npm 또한 동일하게 동작합니다.

JEST 실행하기

./sum.js

function sum(a,b){
    return a + b;
}

./sum.test.js

const sum = require("./sum");
test("adds 1 + 2 to equal 3",()=>{
    expect(sum(1,2)).toBe(3);
})

./package.json

{
    ...
    "script" : {
    "test" : "jest"
    }
}

Jest 구동 : $ npm test || yarn test

이제 터미널에서는 우리가 작성한 sum.test.js가 테스트를 거쳐, 성공하였다는 메세지를 보게 될 것 입니다.

전역에서 JEST를 사용하기

Package 마다 jest를 설치하지 않고, 당신의 컴퓨터에 전역으로 JEST를 설치하고 당신의 테스트 코드를 실행 할 수 있습니다.

* yarn을 통해 전역 설치하기
    * $ yarn global add jest
* npm을 통해 전역 설치하기 
    * $ npm install jest —g 

my-test 폴더에 있는 test 파일 실행 하기

$ jest my-test —notify —config=config.json

jest의 cli 옵션에 대해서 궁금하다면 다음 링크를 참고 하세요 .

configuration 파일 만들기

config 파일을 만들어 프로젝트 별로 jest의 설정을 달리 할 수 있습니다.

$ jest —init

JEST에서 바벨 설정하기

Note : jest는 javascript의 최신 문법을 인지 하지 못하여, import export와 같은 구문을 이해하지 못합니다. 그렇기에, 최신문법을 JEST에서 사용하기 위해 ES6 이상의 문법을 JEST가 이해 할 수 있는 코드로 변경해야 합니다.

* yarn을 이용한 babel 설치 
    * $ yarn add —dev babel jest @babel/core @babel/preset-env

./babel.config.js

module.exports = {
    presets : [['babel/preset-env',{targets : {node : 'current'}}]]
}

webpack 과 함께 사용하기

다음 링크를 참조 하시기 바랍니다.

parcel 과 함께 사용하기

다음 🚀 Getting Started 를 참조 하시길 바랍니다.

Typescript 사용하기

Note : 제스트에서 typescript를 사용 할 수 있습니다. 이를 위해서는 bable.config.js를 이용하여, jest가 typescript를 이해 할 수 있도록 설정해야 합니다.

* yarn을 이용한 typescript 바벨 프리셋 설치 
    * $ yarn add —dev @babel/preset-typescript

./Babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-typescript',
  ],
};

Note : 바벨을 이용하여 typescript를 사용하면 문제가 발생합니다. 이는 babel이 실행 될 때 패키지 내부에 존재하는 파일을 변경하며, jest의 타입이 존재하지 않아 발생합니다. 이를 방지하고 싶다면, TS-jest를 이용하거나, tsc 명령어를 입력하여, javascript파일로 변경하고, 이를 jest를 통해 실행하는 방법이 존재 합니다.

또한 @types/jest를 설치하여, ts포맷에서 test를 실행 할 수 있습니다.

NOTE : @types/* 모듈들은 관련있는 모듈과 버전을 일치 시키는 것을 권고합니다. 예를 들어 26.4.0 버전의 jest를 사용하고 있다면, 26.4.*의 @types /jest를 사용해야 합니다. (즉 메이저 버전과 마이너 버전을 가능한 매치 해야합니다. )

* yarn을 이용한 @types/jest
    * yarn add —dev @types/jest