티스토리 뷰

사실 지금까지 자바스크립트 테스트 코드를 잘 쓰지 않았다. 쓴다면 직접 임시 코드를 만들고 try...catch를 날린정도? 하지만 이것저것 하다보니 테스트 환경의 필요성을 느끼게 되었다. 특히 유닛 테스트를 하면 각 메소드나 함수가 제대로 작동하는지 한번에 알 수 있어서 개발이 편해진다.

테스트 환경을 구축하기 위해서는 테스트 러너(Test runner)와 테스팅 프레임워크(Testing framework)가 필요하다. 테스트 러너는 말그대로 테스트를 실행해주는 패키지고, 테스팅 프레임워크는 효율적으로 테스트 코드를 작성하기 위해 사용하는 프레임워크다. 다양한 테스트 러너가 있는데, 나는 Karma를 써보기로 했다. AVA라는 테스트 러너도 있는데 굳이 Karma를 쓰는 이유는, (1) MochaJasmine 같은 기존의 테스팅 프레임워크를 그대로 쓸 수 있고 (2) 자료가 많기 때문이다. 테스팅 프레임워크는 어떤 것을 써도 큰 상관이 없다. Mocha와 Jasmine이 우위를 다투고 있는 듯한데 나는 Jasmine을 써보기로 했다.

설치

당연하지만 Node.js가 설치되어 있어야 한다. Node.js가 있다면 프로젝트 경로에 Karma와 Jasmine을 설치하자. 나는 간단하게 project 폴더 아래에 test 폴더를 만들었다.

$ cd project
$ npm install karma karma-chrome-launcher jasmine-core --save-dev

karma-chrome-launcher는 이후 테스트를 크롬에서 실행하겠다는 것이다. karma-firefox-launcher, karma-safari-launcer 등 다양한 브라우저를 지원한다.

그리고 Karma의 커맨드를 사용하기 위해 전역에 karma-cli도 설치한다.

$ npm install -g karma-cli

전역에 패키지를 설치하면 다른 프로젝트에서도 karma-cli 패키지에 접근할 수 있다.

테스트 코드 작성

test 폴더에 sum.spec.js 파일을 만들었다.

sum.spec.js

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

describe('sum()', function() {
  it('should returns the sum of two arguments', function() {
    expect(sum(1, 2)).toBe(3);
  });
});

sum(1, 2)를 실행해 3을 반환하면 성공했음을, 아니면 실패했음을 알리는 테스트 코드다. 간단한 예시라서 같은 파일 안에 원본 코드와 테스트 코드를 함께 작성했다.

Karma 설정

karma.conf.js 파일을 만들어야 하는데, 명령어로 쉽게 설정할 수 있다.

$ karma init

여러가지 질문이 나오는데, 나중에 바꿀 수 있으니 일단 그냥 다 엔터하고 넘어가자. 단, What is the location of your source and test files ?에는 test/*.js를 입력해준다. 질문에 답을 마치고나면 karma.conf.js 파일이 만들어진 것을 볼 수 있다.

karam.conf.js

// Karma configuration
// Generated on Mon May 07 2018 08:20:56 GMT+0900 (대한민국 표준시)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      'test/*.js'
    ],


    // list of files / patterns to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

대략 이런 설정 파일이 만들어질 것이다.

테스트 실행

먼저 package.json에 스크립트를 추가해준다.

package.json

...
  "scripts": {
    "test": "karma start"
  },
...

그리고 스크립트를 실행한다.

$ npm run test

이렇게 하면 자동으로 테스트가 진행된다.

chorme test

크롬이 열리고 터미널에서 테스트 결과를 확인할 수 있다.

test result

그런데 크롬창이 닫히질 않는다. 이 상태에선 테스트 코드를 수정할 때마다 테스트가 자동으로 진행된다. 만약 이것을 원치 않는다면 karma.conf.js 설정을 바꿔주면 된다.

karma.conf.js

...
  // Continuous Integration mode
  // if true, Karma captures browsers, runs the tests and exits
  singleRun: false,
...

여기서 singleRuntrue로 바꾸면 브라우저 창이 잠시 나타났다가 사라지고 터미널에 테스트 결과가 출력된다.

ES6 사용하기

테스트 코드를 ES6로 작성하고 싶다면 몇가지 설정을 추가해야 한다. (Webpack과 Babel을 사용하고 있다는 가정 하에 설명하겠다. 만약 이 둘을 사용하고 있지 않다면 21세기 프론트엔드 기본 튜토리얼 (2) webpack 확장하기를 먼저 참고해보자.)

$ npm install karma-webpack --save-dev

이제 karma.conf.js를 조금 수정해준다.

karma.conf.js

const webpackConfig = require('./webpack.config.js');

module.exports = function(config) {
  config.set({
    ...
    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'test/*.js': ['webpack']
    },
    webpack: webpackConfig,
    ...

이렇게 하면 webpack.config.js의 Babel 설정에 따라 Karma 실행에 앞서 전처리기가 실행되면서 ES6 코드가 트랜스파일된다.

댓글
댓글쓰기 폼