단위 테스트 삽질기

Karma란 무엇인가?

Karma는 유닛 테스트를 위한 Framework가 아니라 작성한 Javascript 코드를 실행시켜주는 테스트 러너이다. Karma는 여러가지 브라우저의 실제 환경에 맞춰 Javascript 코드를 실행시켜주는 하나의 툴이다. 브라우저는 Chrome, Firefox, PhantomJS, Internet explorer 등 여러가지의 브라우저 환경에서 개발자가 작성한 Javascript코드를 실행시켜준다. Karma Github에 따르면 Karma의 주 사용 목적은 TDD 를 쉽고, 빠르고, 재밌게 만들어준다고 한다. 또한 Karma에 Istanbul을 이용한다면, coverage report를 자동으로 변환시켜준다.

Karma는 단순히 HTTP server와 테스트 러너 HTML 파일만 변환해 줄 뿐 이지 유닛 테스트 프레임 워크가 아니다. 그래서 Karma와 같이 유닛 테스트 Framework는 개발자가 선택하여 사용하면 된다. 대표적인 유닛 테스트 Framework는 Jasmine이나 Mocha, Qunit 등이 있다.

Karma의 configuration

일단 Karma의 경우 마치 webpack과 같이 karma 명령어를 이용하여 사용하기 때문에 npm을 이용하여 전역으로 사용할 수 있도록 설치해줘야 한다.

1

$ npm install karma -g

그 후 configuration 을 사용용도에 맞게 작성해주면 된다. karma의 config는 Javascript, Coffescript, Typescript 등 작성 될 수 있으며, 작성된 설정된 파일은 Javascript의 모듈에 의해서 불러진다.

아래의 설정은 Karma + Mocha를 이용하여 유닛 테스트를 작성할 때의 config 설정이다. 실제 작성된 과정이 궁금하다면 여기 를 클릭하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

module.exports = function (config) {
  config.set({
    browsers: ['PhantomJS'],
    // karma는 말했듯, 유닛 테스트 Framework가 아니다. 그래서 개발자가 원하는 유닛 테스트를 돌리기 위해서는 유닛 테스트 Framework를 선택해야 한다. 그 사용할 Framework를 `배열` 형태로 작성해주면 된다. 
    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
    reporters: ['spec', 'coverage'],
    // files option 에서는 브라우저에서 읽어들일 파일의 배열 형태로 넣어준다. 이 안에는 예를 들어 파일 확장 'spec' 의 파일을 테스트 해라 등의 파일 패턴 들을 넣어주게 된다.
    files: [
      '../../node_modules/babel-polyfill/dist/polyfill.js',
      './index.js'
    ],
    // 런타임에서 사용할 수 있드록 index.js를 webpack을 이용해 transforing 작업을 한다.
    preprocessors: {
      './index.js': ['webpack', 'sourcemap']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    }
  })
}

browsers options

위에서는 유닛테스트할 브라우저를 PhantomJS만 설정하였지만, 이 브라우저의 환경은 개발자가 원하는 브라우저를 배열 형태로 넣어주면 된다. 각 브라우저를 사용하기 위해서는 또다른 플러그인이 필요로 한다.

• Chrome (requirement: karma-chrome-launcher)
• ChromeCanary (requirement: karma-chrome-launcher)
• PhantomJS (requirement: karma-phantomjs-launcher)
• Firefox (requirement: karma-firefox-launcher)
• Opera (requirement: karma-opera-launcher)
• Internet Explorer (requirement: karma-ie-launcher)
• Safari (requirement: karma-safari-launcher)

여기에서 브라우저를 사용 목적에 맞게 설정해주면 karma는 http server를 실행시켜주며 그 server는 9876 포트를 listening 하고 있다. (http://localhost:9876)

출처

Karma Github