Vue * TypeScriptでフロントエンドのテスト(Karma, vue-test-util)

依存関係多すぎ問題
Karmaとかvue-test-utilsとか

実行サンプル

とりあえず動かした方が理解が早いかも
https://github.com/ninomae-makoto/Typescript-Vue-Karma

環境について

Win/Mac どちらでも (Linuxもいける？)
Visual Studio Code推奨

Node.js

JavaScript扱うならとりあえず入れとくのが吉

mocha

Node.jsテスト用ライブラリ
主にサーバ側
単体でブラウザでも使えなくはないが思ってるのとちょっと違う。
ブラウザで使えるようにゴニョゴニョする。

chai

assertはnode.jsに入っているがブラウザだと使えない。
assertの代わりとして使う

webpack

モジュールバンドラー
https://webpack.js.org/
tsファイルとvueファイルをコンパイルしたりとか
Vueのテストにはほぼ必須

Karma

ブラウザテスト用
テスト専用Webサーバを立てるようなイメージ
https://github.com/karma-runner/karma

vue-test-utils

Vueの公式テストライブラリ
https://vue-test-utils.vuejs.org/ja/guides/getting-started.html

日本語で書かれているがTypeScriptについての記述が少ないので少し手間取った。

依存関係一覧

以下package.jsonを抜粋

{
  "devDependencies": {
    "@types/chai": "^4.1.2",
    "@types/mocha": "^5.0.0",
    "@types/node": "^9.4.6",
    "chai": "^4.1.2",
    "css-loader": "^0.28.9",
    "karma": "^2.0.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.5",
    "karma-webpack": "^3.0.0",
    "mocha": "^5.0.5",
    "mocha-webpack": "^1.1.0",
    "ts-loader": "^4.0.1",
    "tslint": "^5.9.1",
    "tslint-loader": "^3.5.3",
    "typescript": "^2.7.1",
    "vue-class-component": "^6.1.2",
    "vue-loader": "^14.1.1",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.11"
  },
  "dependencies": {
    "@vue/test-utils": "^1.0.0-beta.13",
    "element-ui": "^2.2.0",
    "vue": "^2.5.13"
  }
}

kalma-xxxxを使用する場合元のxxxxもインストールする必要がある模様(mocha, chai, webpackなど)
mochaだと依存が増えすぎるのでjasmineの方が本当はいいかも

kalma.conf.js

ブラウザで読み込む順にfilesを指定して、最後にtestファイルを持って来ればうまく動く。

var webpackConfig = require('./webpack.config.js')
 
module.exports = function (config) {
  config.set({
    // 重要！！
    mime: {
      'text/x-typescript': ['ts', 'tsx']
    },
    basePath: '',
    frameworks: ['mocha', 'chai'],
 
    // 重要！！
    files: [
      "./node_modules/vue/dist/vue.js",
      'src/test/**/*.ts'
    ],
    exclude: [
    ],
 
    // 重要！！
    preprocessors: {
      'src/test/**/*.ts': ["webpack"]
    },
 
    webpack: webpackConfig,
 
    reporters: ['mocha'],
    port: 9876,
    colors: true,
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_DEBUG,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}

filesがテスト対象になる。

files: [
  "./node_modules/vue/dist/vue.js",
  'src/test/**/*.ts'
],

vueはwebpackのオプションで外部化している。 htmlでスクリプトを読み込む要領で上から指定すれば外部ファイルも使用できる。

Chromeでは以下を追加しないとTypeScriptが読み込めずエラーになる。

mime: {
   text/x-typescript': ['ts', 'tsx']
},

各オプションの詳細は以下
http://karma-runner.github.io/2.0/config/configuration-file.html

またsfa.d.tsがあるディレクトリ以下にtestファイルを配置しないと

import component from "./../components/Test.vue"

がビルドエラーになってしまった。

webpack4以降だとmodeオプションを指定しないと警告が出る
webpack.config.jsで指定できる。

以上の複雑怪奇な依存関係をどうにか出来たら

karma start

でテストが実行できるようになる。

参考

Karmaについては以下がわかりやすかった。
https://qiita.com/howdy39/items/b9d704e7f84053924da3

後はvue-test-utilsの公式ドキュメントを見ればなんとかなる。