자바스크립트를 활성화 해주세요

d030 Typescript Unittest 설정방법

 ·  ☕ 2 min read

typescript 프로젝트의 unittest에 사용하는 패키지는 몇 가지가 있는데 각각의 특징은 다음과 같습니다.

  • Mocha/Chai 는 따로 파일을 작성하지 않아도 좋습니다만,
  • jasmin은 jasmin.json를 따로 정의해줘야 합니다.
  • jest는 jest.config.js를 따로 작성해줘야 합니다.

코드 커버리지는 https://github.com/istanbuljs/nyc 를 사용하겠습니다.

nodejs

nodejs설치, 프로젝트를 만드는 커맨드를 간단버전으로 살펴보고 가겠습니다. 윈도우즈 환경의 커맨드입니다.

scoop install nvm
nvm install latest
nvm use 14.13.1

mkdir temp3; cd temp3
npm init -y
npm install --save typescript
npx tsc --init

Mocha/Chai

package 설치

npm i -D chai mocha nyc ts-node typescript
npm i -D @types/chai @types/mocha

package.json

1
2
3
4
"scripts": {
    "test": "mocha -r ts-node/register tests/**/*.test.ts",
    "coverage": "nyc -r lcov -e .ts -x \"*.test.ts\" npm run test"
}

tests/Calculator.test.ts

1
2
3
4
5
6
describe('calculate', function() {
  it('add', function() {
    let result = Calculator.Sum(5, 2);
    expect(result).equal(7);
  }); 
});

test

npm run test

jasmin

자스민은 jasmin.json 이라는 파일의 정의를 필요로 합니다.

package 설치

npm i -D jasmine nyc ts-node typescript
npm i -D @types/jasmine

package.json

1
2
3
4
"scripts": {
  "test": "ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
"coverage": "nyc -r text -e .ts -x \"tests/*.test.ts\" npm run test"
}

jasmin.json

1
2
3
4
{
   "spec_dir": "tests",
   "spec_files": ["**/*[tT]est.ts"]
}

jest

jest는 jest.config.js 라는 파일의 정의를 필요로 합니다.

package 설치

npm i -D jest ts-jest typescript
npm i -D @types/jest

package.json

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

jest.config.js

1
2
3
4
5
6
module.exports = {
  transform: {'^.+\\.ts?$': 'ts-jest'},
  testEnvironment: 'node',
  testRegex: '/tests/.*\\.(test|spec)?\\.(ts|tsx)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};

결과

Calculator.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
export default class calculator {
    static Sum(a: number, b: number): number {
        let c = a + b;
        return c;
    }

    static Difference(a: number, b: number): number {
        let c = a - b;
        return c;
    }
}

Calculator.test.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import { expect } from 'chai';
import C from '../src/Calculator';

describe('calculate', function() {
    it('add', function() {
        let result = C.Sum(5, 2);
        expect(result).equal(7);
    });

    it('substract', function() {
        let result = C.Difference(5, 2);
        expect(result).equal(3);
    });
});

d030_webstorm_test.png

기타

최신의 jetbrain webstorm에서는 통합 terminal에서 실행명령을 인식하는 경우가 있습니다. 예를 들면 npm run test라는 커맨드를 쓰면 녹색으로 변하는 경우가 있는데, 이렇게 highlited 된 커맨드를 ctrl enter를 누르면 run 커맨드가 발동하거나, ctrl shift enter를 누르면 debug 커맨드가 발동하여 break point에서 멈추게 하는 것도 가능합니다.

레퍼런스

공유하기

tkim
글쓴이
tkim
Software Engineer