『Vue.js入門 基礎から実践アプリケーション開発まで』 10.2 コンポーネントの実装 に取り掛かる前に実行した npm run unit の結果がわからない

ユニットテストの実行と結果

次のようになりました。

構文エラーは無いようですが、 テストを 1 つも実行していないのでエラーとなっています。

これは、気にしなくてよいのでしょうか？

そして、レポートの読み方がそもそもよくわかりません＞＜。

レポートの読み方を調べる

• testing – How do I read an Istanbul Coverage Report? – Stack Overflow
• dwyl/learn-istanbul: Learn how to use the Istanbul JavaScript Code Coverage Tool
• step by stepで始めるKarma – Qiita

各項目は、次の意味で良さそうです。

Statements: How many of the statements in you code are executed. Branches: Conditional statements create branches of code which may not be executed (e.g. if/else). This metric tells you how many of your branches have been executed. Functions: The proportion of the functions you have defined which have been called. Lines: The proportion of lines of code which have been executed.

現在の状況

vue init で作成したプロジェクトで、 test/unit/karma.conf.js が設定ファイルです。

それを PhantomJS ではなく、 ChromeHeadless でテストするようにした結果 、レポート部分は次のようになりました （たぶん最初から変わっていません）。

そして、『Vue.js入門 基礎から実践アプリケーション開発まで』 10.2 コンポーネントの実装 に取り掛かる、前、が今です。

TDD で進めていくよ！というコンセプトで、テストを作り、失敗することを確認してから、テストが成功するようにコードを書いていきます。

なので、テストを作る前から失敗していますので、テストが成功するようにコードを書いていったとしても、テストを作る前の失敗が取り除かれなければ何も意味がありません。

このまま進めていって大丈夫なのか、わかりません。。。

おわりに

わかりませんが、このまま進める予定です。

プロジェクト作成後に PhantomJS から ChromeHeadless へと変更した ときは、サンプルテストコードが動きましたし、エラー内容はテストがないよ！というものです。

ですので、テストさえ書けば動くように思います。

今回、わざわざ投稿したのは、JavaScript 環境でのテストを行ったことがなく、状況がどうにも判断できないからでした。

以上です。

その後 (2018年12月31日) 。問題ないことがわかりました

10.2.1 KbnButton コンポーネント、で実際のテストとコードを作成して動かしたところ、問題ないことがわかりました。

Coverage summary の項目はすべてグリーンとはなりませんでしたけれども、10.2.1 KbnButton コンポーネント の部分はすべて最終的にグリーンとなりましたので、これで問題なしと結論づけました♪

実際に動かしたときの結果です。