FrontEnd

【Vue.js】コンポーネントのテストコードをvue-test-utilsとJestで実装

投稿日:

はじめに

今回の記事では、 Vue.js で単体テストを実装する方法を紹介します。 vue-test-utils を使うとテストコードを簡単に実装できるので、これを使っていきます。

Vue CLI でプロジェクトを作成した場合、テストランナーは Mocha + Chai か Jest のどちらか好きな方を選ぶことができますが、今回は Jest を使用します。どのテストランナーが良いかについてはこちらが参考になります。

参考までに、今回使用した主なライブラリ等のバージョンを記載します。

  • Node.js v13.2.0
  • yarn 1.17.3
  • Vue CLI 4.1.1
  • @vue/test-utils 1.0.0-beta.31
  • @vue/cli-plugin-unit-jest 4.3.1

セットアップ

Vue CLI を利用してプロジェクトを作成する場合、対話形式で選択すれば設定が自動で完了します。今回は、 Unit test に Jest 、ほかにも、 TypeScript を使うように選択しました。

コンポーネントのテスト

実際にテストコードを書く前にコンポーネントがテストの流れを簡単に説明します。

まず初めに、 vue-test-utils から mount メソッドとテスト対象のコンポーネントをインポートします。

次に、コンポーネントのラッパーを作成します。

最後にテスト内容を記述します。

なお、 MyComponent の中身は以下のとおりです。

Shallow 描画

単体テストの場合、テスト対象のコンポーネントに焦点を当ててテストするために、子コンポーネントの振る舞いに影響されたくないと思いますが、 mount のかわりに shallowMount を使うことで子コンポーネントを(スタブによって)描画しないでテストすることができます。

基本的な例

Vue CLIでプロジェクトを作成した場合、以下のようなテストコードのサンプルが作成されます。

ちなみに、テストコードは tests/unit/ 以下に xxx.spec.ts もしくは、 xxx.test.ts という形式のファイル名で作成します。

テストを実行する場合は yarn test:unit を実行します。

プロパティを渡す

コンポーネントにプロパティを渡すには propsData オプションを使います。

また、 setProps メソッドでプロパティをあとから変更することもできます。

ユーザーの操作をシミュレーションする

ボタンをクリックした場合など、ユーザーの操作をシミュレーションする事ができます。

この場合、まず、 find メソッドでボタン要素を探し、 trigger メソッドでクリック操作をシミュレーションします。

イベントを検証する

マウントされた vue インスタンスに対して $emit メソッドを使うことでイベントを発行することができます。

発行されたイベントを検証するには emitted を使います。

グローバルプラグインとミックスイン

グローバルプラグイン(例えば VueRouter や Vuex など)やミックスインに依存したコンポーネントに対し、グローバルな Vue コンストラクタを汚染することなく独立した設定でテストしたい場合、 createLocalVue メソッドを使用することで実現することができます。

公式のサンプルコードを元に説明します。テストするコンポーネントは以下のとおりです。

次に、テストコードは以下のとおりです。

以下のコードで拡張された Vue コンストラクタを作成し、 Vuex をインストールします。

以下のコードで Vuex.store のモックを作成します。これは beforeEach でテスト前に毎回作成されます。

以下のコードで作成した Vuex.store のモックを使えるようにします。

wrapperのプロパティとメソッド

wrapper オブジェクトのプロパティとメソッドの一部を紹介します。詳細はこちらをご覧ください。

vm vueインスタンスで、プロパティとメソッドにアクセスできる
element ラッパーのルートDOM
attributes ラップされている要素の属性(オブジェクト)
classes ラップされている要素のクラス名
contains 要素もしくはセレクタで指定したコンポーネントを含んでいるか
exist 存在するか
find 最初のDOMノードのwrapperもしくはVueコンポーネント
trigger DOMノードのイベントを発火する

Jestのメソッド

Jest のメソッドの一部を紹介します。詳細はこちらをご覧ください。

expect 値をテストしたい時に外のマッチャー関数と一緒に使用する
toBe 値もしくはオブジェクトのいくつかのプロパティを検証する
toBeTruety bool値でtrueであるか
toBeFalsy bool値でfalseであるか
toContain アイテムが配列内にあるか
toMatch 文字列が正規表現と一致するか

さいごに

いかがでしたでしょうか。今回は基礎的なところでコンポーネントの単体テストに絞って紹介しました。この他にも、実際のプロジェクトでは axios などの非同期処理や Vuex などもテストしたい場合があると思いますので、今後機会があれば調べて見たいと思います。

おすすめ書籍

Vue.js入門 基礎から実践アプリケーション開発まで 動かして学ぶ!Vue.js開発入門 実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

icon

TypeScript初心者が押さえておくべき型システム

1 はじめに2 型アノテーション2.1 プリミティブ型2.2 リテラル型2.3 any2.4 nullとundefined2.5 ユニオン型2.6 交差型2.7 タプル型2.8 列挙型2.9 配列2. ...

Vue.js入門その1〜基本文法〜

はじめに 軽量JSフレームワークとして有名なVue.js。 最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思 ...

フォロー

blog-page_side_responsive

2020年5月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。