배경

공식 단위 테스트 그러나 빌드 도구가있는 테스트 환경이되었습니다.
다만, 자신의 환경에서는, webpack 등 빌드 툴은 사용하고 있지 않고, Vue.js 의 단체를 사용하고 있다.
그런 상황이지만 단위 테스트는 실시하고 싶다.

문제

공식에서도 webpack등을 사용하고 있기 때문인지, vue의 테스트의 정보는, 빌드 툴 있어 되어 있다.
단지, 단체 테스트를 위해서만 webpack을 넣을까? 그렇다면 그것은 그렇게 귀찮습니다.
조금 만든 vu 어플리케이션의 무결성을 담보할 수 있으면 그것으로 좋기 때문에, 가능한 한 번거로움 없이 테스트를 실시하고 싶다.

달성 목표

webpack은 사용되지 않습니다

jasmine + karma에서 vue.js 단위 테스트

헤드리스 테스트 (phantomjs 사용)

coverage는 취할 수 있도록 해 둔다

과 이상의 4점을 달성할 수 있으면 OK라고 합니다.

테스트를 수행하는 vue 애플리케이션 정보

테스트 구현 환경의 샘플로서 Hello world 레벨의 vue 애플리케이션을 작성했다.
테스트하는 vue 앱
이 녀석에 대해 이번에는 이 애플리케이션의 단위 테스트를 실시해 갑니다.

주의사항

webpack과 같은 빌드 도구는 사용하지 않지만 라이브러리 및 프레임 워크 관리로 npm을 사용합니다.
node.js와 npm의 버전은 다음과 같습니다.

$ node -v
v7.3.0
$ npm -v
3.10.10

필요한 라이브러리 등 종속성

라이브러리와 프레임워크를 package.json에 추가합니다.

package.json

  "devDependencies": {
    "jasmine": "^2.5.3",
    "karma": "^1.6.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-spec-reporter": "0.0.31",
    "phantomjs-prebuilt": "^2.1.14"
  },
  "dependencies": {
    "vue": "^2.2.6"
  }

karma 설정

제품 코드는 src/script/테스트 코드는 test/unit/spec/ 에 배치합니다.

karma.conf.js

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

제품 코드

제품 코드로 간단한 vue 샘플을 만듭니다.

product.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello ',
    name: ""
  },
  methods: {
    greet: function (event) {
      this.name = "Vue!";
    },
    clrearGreet: function (event) {
      this.name = "";
    }
  }
})

테스트 코드

jasmine의 해설이 목적이 아니기 때문에, 테스트 코드의 세세한 해설은 생략하겠습니다.clrearGreet 에 대해, 굳이 테스트는 쓰지 않습니다.

spec.js

describe('vue アプリのテスト', function() {
  it('has a created hook', function() {
    expect(typeof app.$data).toBe('object');
  });
  it('vueコンポーネントのdata検証', function() {
    expect(app.$data.message).toBe('Hello ');
    expect(app.$data.name).toBe("");
  });
  it('vueコンポーネントのmethods検証', function() {
    expect(app.$data.name).toBe("");
    app.greet()
    expect(app.$data.name).toBe('Vue!');
  });
});

실행 결과

테스트 결과

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR LOG: '[Vue warn]: Cannot find element: #app '

  vue アプリのテスト
    ✓ has a created hook
    ✓ vueコンポーネントのdata検証
    ✓ vueコンポーネントのmethods検証

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

커버리지

잘 결과가 나오고 있습니다.
테스트를 통해 없는 부분에 대해서도 제대로 하고 있네요.

결론

이제 제품 코드와 테스트 코드를 추가해도 특별히 설정을 변경하지 않고 테스트를 할 수 있는 환경이 갖추어졌습니다.
다만, 이것이라도 테스트 환경의 도입으로서는, 조금 귀찮을까 생각하기 때문에, 보다 편하게 헤드리스 테스트할 수 없는 것이라고 생각하기 때문에, 이 근처는 앞으로도 좀 더 모색해 나갈까 생각합니다.
뭔가 좋은 방법이 있으면 가르쳐 주시면 다행입니다.

이 기사에서 사용하는 소스 코드는 Github에 게시됩니다.