javascript 의 테스트 프레임워크 「jasmine」의 도입과 간단한 사용법에 대해 정리해 갑니다.
karma에서 사용하는 브라우저는 phantomjs를 사용합니다.

사전 작업

jasmine, karma 등 필요한 라이브러리를 install합니다.
package.json의 devDependecies에 다음을 추가하고 npm install을 수행합니다.

pacage.json

"devDependencies": {
    "jasmine": "^2.5.2",
    "karma": "^1.3.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-spec-reporter": "0.0.26",
    "phantomjs-prebuilt": "^2.1.14"
  }

테스트 실시 후에 coverage도 볼 수 있도록 하고 싶기 때문에, 「karma-coverage」를.
기본 콘솔은 보기 어려우므로 "karma-spec-reporter"에서 콘솔 표시를 변경합니다.

karma.conf.js 만들기

karma init로 작성된 karma.conf.js를 아래와 같이 편집합니다.

karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      "src/script/js/*.js",
      "spec/*.js"
    ],
    exclude: [],
    preprocessors: {
      'src/script/js/*.js': ['coverage']
    },
    reporters: ['spec', 'coverage'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity
  })
}

coverage의 대상이 되는 파일은, preprocessors 에 기술해, reporters에 coverage를 추가하고 있습니다.
또한 콘솔 표기법을 쉽게 볼 수 있도록 reporters의 progress를 spec으로 변경했습니다.

preprocessors: {
  'src/script/js/*.js': ['coverage']
},

karma.conf.js

- reporters: ['progress'],
+ reporters: ['spec', 'coverage'],

jasmine 단위 테스트 작성

테스트 대상의 js 는 demo.js 로 하고 object 의 값을 테스트해 보고 싶습니다.
테스트 파일은 demoSpec.js이며 demo.js의 testTarget name 값을 테스트합니다.

demo.js

var testTarget = {};
testTarget.name = "jasmine-test";

demoSpec.js

describe("demoTest", function() {
    it("demo getName", function() {
        expect(testTarget.name).toEqual("jasmine-test");
    })
});

테스트 실행

karma.conf.js와 같은 계층에서 다음을 실행하면 karma가 실행됩니다.
옵션 --single-run 을 붙이지 않는 경우는, karma의 WebServer가 계속 기동해, 항상 소스를 감시해 변경이 있으면 테스트를 자동으로 돌리는 형태가 됩니다.

$ node_modules/karma/bin/karma --single-run 

단지 이것이라면 path를 치는 것도 번거롭기 때문에 package.json에 script로 추가합니다.

package.json

"scripts": {
  "test": "npm run deleteCoverage && npm run karma",
  "karma": "karma start --single-run",
  "deleteCoverage": "rm -rf coverage/",
  "clean": "rm -rf node_modules/ && npm cache clean"
},

스크립트를 추가 한 후,

$ npm test

그래서 카르마가 달립니다.

테스트 결과

$ npm test

  demoTest
    ✓ demo getName

PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0.004 secs / 0.002 secs)
TOTAL: 1 SUCCESS

테스트가 실패하면

$ npm test

demoTest
    ✗ demo getName
    Expected 'jasmine-test' to equal 'jasmine-testttt'.
    spec/demoSpec.js:3:40
    loaded@http://localhost:9876/context.js:151:17


PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.004 secs / 0.002 secs)

coverage

커버리지는 Coverage > PhantomJs > index.html
그리고 html 파일로 토출됩니다.

결론

jasmine과 karma에서 단위 테스트를 작성하는 방법을 알았으므로 다음은 Angular 단위 테스트를 jasmine으로 작성하려고합니다.

이번 소스는 아래 URL에서 볼 수 있습니다.
htps : // 기주 b. 코 m / 요 헤이타 / 그럼 s 미네 카 r

2017/01/03 추가

Angular의 단위 테스트에 대해 jasmine으로 가 보았던 것을 공개했습니다.
【jasmine + Karma】에 의한 AngularJs 단체 테스트를 해 보았다