参考にさせて頂いたページ
公式ドキュメント(日本語版)
公式リポジトリ
vue-test-utils
vue-test-utils-jest-example
今日の環境
- Windows10
- node 8.11.1
- npm 5.8.0
ひとまずREADMEを読む
とりあえずは読むだけでコマンドは実行しません。
2018年09月17日現在ではbeta版だそうです。
npm install --save-dev @vue/test-utils
または
npm install --save-dev @vue/server-test-utils
でインストールするとのこと。
テスト実行時に使用するため、テンプレートコンパイラも必要です。
npm install --save-dev vue-template-compiler
バージョンについての注意書きがありました。
ここ大事ですね。
Vueのバージョンと同じでないといけないそうです。
以下は引用文とその翻訳です。
You need to install vue-template-compiler which is used to compile components. It should be the same version as the version of Vue you are using.
コンポーネントをコンパイルするために使用されるvue-template-compilerをインストールする必要があります。 これは、使用しているVueのバージョンと同じバージョンでなければなりません。
jestの例をcloneして実行してみる
簡単そうなのでjestを使ってみることにします。
リポジトリをcloneする
GitHub - vuejs/vue-test-utils-jest-example: Example project using Jest + vue-test-utils together から以下のコマンドでリポジトリをcloneします。
git clone git@github.com:vuejs/vue-test-utils-jest-example.git
node_modulesをインストールする
まず移動します。
cd vue-test-utils-jest-example
git cloneするとpackage.jsonも含まれているので、一度node_modulesをインストールします。
npm install
buildを実行してみる
READMEにならって、buildを実行してみます。
npm run build
以下のように表示されました。
> vue-test-utils-jest-example@1.0.0 build C:\Users\motomichi\Desktop\vue_test_utils__samples\vue-test-utils-jest-example> cross-env NODE_ENV=production webpack --progress --hide-modules
Hash: f98dca254ec3566403ca
Version: webpack 3.12.0
Time: 8281ms
Asset Size Chunks Chunk Names
build.js 99.2 kB 0 [emitted] main
build.js.map 847 kB 0 [emitted] main
build.js と build.js.mapが出力されたことがわかります。
testを実行してみる
READMEにならって、testを実行してみます。
npm test
以下のように表示されました。
> vue-test-utils-jest-example@1.0.0 test C:\Users\motomichi\Desktop\vue_test_utils__samples\vue-test-utils-jest-example > jest PASS test\Message.spec.js PASS test\List.spec.js PASS test\MessageToggle.spec.js Test Suites: 3 passed, 3 total Tests: 5 passed, 5 total Snapshots: 1 passed, 1 total Time: 5.635s Ran all test suites.
以下のspecが実行されたことがわかります。
- test\Message.spec.js
- test\List.spec.js
- test\MessageToggle.spec.js
終わりに
とりあえず簡易的にテストを実行するだけしてみました。
package-jsonを見れば、既存のプロジェクトに導入するのに必要なパッケージもわかりますし、srcとtestの内容を読めば使い方もわかりそうです。
次は軽くsrcとtestのディレクトリ内にあるファイルを読んでみようと思います。
以下の公式ドキュメントにガイドがありますので、基本的な使い方は学習がしやすそうです。
