1 분 소요

개요

Jest는 자바스크립트 단위 테스트 프레임워크입니다. Mocha같은 경우는 Chai와 같은 Assertion 라이브러리가 필요한데, Jest는 단독으로 사용할 수 있어서 최근에는 더 많이 사용되는 것 같습니다.

Jest 설치

  1. 개발 환경 구축을 참고하여 다음을 설치합니다.

  2. 다음 명령을 이용하여 기본적인 node.js프로젝트를 생성합니다. 물어보는 것들은 기본적으로 Enter하여 지나갑니다.

    1

     npm init

  3. 터미널에서 다음 명령을 입력하여 Jest를 설치합니다. import등 ECMAScript를 사용하려면 @babel/core, @babel/preset-env, babel-jest도 함께 설치되어야 합니다.(-D옵션을 주면 현 프로젝트에 설치되며, 생략하면 글로벌로 설치됩니다.)

    1

     npm install -D jest @babel/core @babel/preset-env babel-jest

  4. package.json에서 scripts의 test를 다음과 같이 jest로 수정합니다.

    1
2
3

     "scripts": {
     "test": "Jest"
 },

  5. 프로젝트 루트에 .babelrc파일을 생성하고 다음을 입력합니다.

    1
2
3

     {
     "presets": ["@babel/preset-env"]
 }

테스트 하기

  1. src폴더를 만들고, operator.js파일을 작성합니다.

    1
2
3
4
5
6
7
8

     function plus(a, b) {
     return a + b;
 }
 function minus(a, b) {
     return a - b;
 }

 export {plus, minus};

  2. test폴더를 만들고, operator.test.js파일을 작성합니다. Jest는 테스트 파일이 꼭 test.js로 끝나야 합니다.

    그리고 import시에 .js을 붙이지 않아도 됩니다.(Babel에서 CommonJS로 변환하기 때문인듯 한데, 좀더 알아봐야 겠습니다.)

    1
2
3
4
5
6
7
8
9
10

     import { plus, minus } from '../src/operator'; // 테스트할 모듈. 확장자를 안붙여도 됩니다.

 describe('테스트입니다', () => { // 테스트 범주
     it('plus() 테스트', () => { // 테스트케이스
         expect(plus(1, 2)).toBe(3);
     });
     it('minus() 테스트', () => { // 테스트케이스
         expect(minus(1, 2)).toBe(-1);
     });
 });

  3. 터미널에서 npm test를 입력하여 실행합니다.

    image

Jest(Visual Studio Code Extensions) 사용하기

  1. Activity Bar의 Extensions을 클릭하여 Jest를 설치합니다.

  2. Activity Bar의 Testing을 클릭하면 Jest가 표시됩니다. UI를 통해 각 테스트를 별개로 실행할 수 있습니다. 만약 보이지 않는다면 Visual Studio Code 를 재실행 해보세요.(혹은 Ctrl+Shift+P 후 Reload Window를 하셔도 됩니다.)

    image

Jest(Visual Studio Code Extensions) 사용하기

파일을 저장하면 모든 테스트가 실행되어 오히려 번거로울 수 있습니다.

이런 경우 저장하는 파일만 테스트할 수 있도록 수정할 수 있습니다.

  1. Test Explorer에서 Configure Test Profiles를 선택합니다.

    image

  2. run Jest Test Provider를 선택합니다.

    image

  3. 혹은 다음과 같이 테스트 루트에 마우스 OVer한 뒤 Change Run Mode를 실행해도 됩니다.

    image

  4. on-save의 편집 아이콘을 클릭합니다.

    image

    그러면 다음과 같이 runMode.json 파일이 작성됩니다.

    1
2
3
4
5
6
7
8

     // close without saving to cancel the change.
 // RunMode reference: https://github.com/jest-community/vscode-jest#runmode
 {
     "$schema": "file:///c%3A/Users/USER/.vscode/extensions/orta.vscode-jest-6.2.1/syntaxes/ExtSettingsSchema.json",
     "jest.runMode": {
         "type": "on-save"
     }
 }

  5. 그뒤 accept버튼을 클릭합니다.

image

  1. 이제 저장하는 테스트 파일만 자동 테스트를 수행합니다.

댓글남기기