[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를 실행하면 테스트의 커버리지를 볼 수 있습니다.