[React] 테스트 프레임웍 jest (1/4) - 샘플 프로젝트 만들기

자바스크립트 테스트 프레임웍인 jest를 사용해 봅니다. React와 함께 많이 쓰입니다. 사용된 운영체체는 fedora linux 입니다.

 

테스트 프로젝트 만들기

 

jest를 연습해볼 테스용 프로젝트를 만듭니다. 

 

1. 프로젝트 폴더를 만듭니다.

 

$ mkdir jest-app

 

2. 프로젝트 폴더로 들어가서 프로젝트를 초기화합니다.

 

모든 질문에는 엔터키를 입력하여 기본값을 선택합니다. typescript를 사용할 거라면 index.js 대신에 index.ts 를 입력합니다. 완료되면 package.json 파일이 만들어 집니다.

 

$ cd jest-app

# npm 사용시
$ npm init

# yarn 사용시
$ yarn init

 

3. git repository를 만듭니다.

 

git이 없으면 "jest --watch" 명령이 실행되지 않았습니다.

 

$ git init

 

다음 내용으로 .gitignore 파일을 만듭니다.

 

# dependencies
/node_modules

 

4. typescript 사용시 설치 및 초기화 하기

 

초기화 후에 tsconfig.json 파일이 만들어 집니다.

 

# npm 사용시
$ npm install --save-dev typescript
$ npx tsc --init

# yarn 사용시
$ yarn add --dev typescript
$ yarn tsc --init

 

뒤에 나올 예제를 작성할 때 CommonJS 모듈을 사용할 경우 Visual Studio Code IDE에서 "블록 변수 범위 'add' (을)를 다시 선언할 수 없습니다." 에러가 나올 수 있습니다. typescript는 모든 파일이 전역 모듈이기 때문에 모듈 scope 가 아니라 전역으로 인식 되기 때문입니다. 해결 방법은 CommonJS 모듈 대신에 ES 모듈을 사용하거나 tscofig.json파일에 "moduleDetection": "force" 로 지정합니다.

 

5. jest를 설치합니다.

- jest : jest 패키지 입니다.

- ts-jest : jest의 typescript 지원 패키지 입니다(typescript 사용시 설치합니다).

- @types/jest : typescript를 위한 타입 정의 패키지 입니다. typescript를 사용하지 않더라도 IDE에서 jest 함수들을 사용하기 위해서 필요합니다.

 

# npm 사용시
$ npm install --save-dev jest ts-jest @types/jest

# yarn 사용시
$ yarn add --dev jest ts-jest @types/jest

 

ts-jest 프리셋 설정을 위해 jest.config.js 파일 생성합니다. package.json 파일과 같은 위치에 생성합니다.

 

$ npx ts-jest config:init

 

생성된 jest.config.js 파일의 내용입니다.

 

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'node',
};

 

참고로 jest.config.js 파일을 대화식 설정으로 생성할 수도 있습니다.

 

$ npx jest --init

 

package.json 파일을 다음과 같이 수정합니다.

 

"scripts": {
    "test": "jest --watch",
    "coverage": "jest --coverage"
},

 

jest의 --watch 옵션은 파일이 수정되는 것을 감시해서 테스트를 수행합니다.

 

6. jest 를 실행해 봅니다.

 

# npm 사용시
$ npm run test

# yarn 사용시
$ yarn run test

 

아직 테스트할 파일이 없으므로 테스트할게 없다는 메세지와 사용법을 보여줍니다.

 

No tests found related to files changed since last commit.
Press `a` to run all tests, or run Jest with `--watchAll`.

Watch Usage
 › Press a to run all tests.
 › Press f to run only failed tests.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

 

테스트 코드 작성해보기

 

프로젝트 폴더 아래에 src 폴더를 만들고, index.js 또는 index.ts 파일을 만듭다.

index.ts 파일 내용입니다.

 

const add = (a:number, b:number) => {
    return a + b;
}

// ES 모듈 방식
export { add };

// CommonJS 모듈 방식
// module.exports = { add };

 

index.test.ts 파일입니다. 테스트 파일은 중간에 .test.가 들어가면 됩니다.

 

// ES 모듈 방식
import { add } from "./index";

// CommonJS 모듈 방식
// const { add } = require('./index');

describe('test index.ts file', () => {
    it('add 1 + 2 to equal 3', () => {
        expect(add(1, 2)).toBe(3);
    });
});

 

$ yarn run test를 실행해 두고 소스를 수정하면 바로 반영되어 테스트 됩니다. $ yarn run coverage를 실행하면 테스트의 커버리지를 볼 수 있습니다.

 

[React] 테스트 프레임웍 jest (1/4) - 샘플 프로젝트 만들기

[React] 테스트 프레임웍 jest (2/4) - jest API

[React] 테스트 프레임웍 jest (3/4) - jest Matchers

[React] 테스트 프레임웍 jest (4/4) - React Apps 테스트하기