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の公式ドキュメントを見ればなんとかなる。
