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


関連記事

vuex-module-decoratorsとTypeScriptでvuexをスマートに書く

1 はじめに2 導入3 どのように記述するか3.1 初めに3.2 state3.3 mutation3.4 action3.5 getter3.6 async MutationAction3.7 Dy ...

react-icon

react-intl (Format.js) を使ってi18n対応

1 はじめに2 react-intlとは?3 react-intlの導入4 使い方4.1 IntlProviderの実装4.2 メッセージ定義4.3 <Foramatted*>コンポーネン ...

js

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

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

tailwindcss

Tailwind CSSの基礎とVue.jsへの導入

1 はじめに2 Tailwind CSSとは2.1 utility class3 Bootstrapとの比較3.1 柔軟性3.2 コード量3.3 学習コスト3.4 ファイルサイズ3.5 その他4 なぜ ...

js

今さらChart.jsでグラフ描画

1 はじめに2 準備3 折れ線グラフと棒グラフ3.1 コード全体3.2 html3.3 JS4 円グラフ4.1 html4.2 JS5 さいごに6 おすすめ書籍 はじめに JSのチャートライブラリは色 ...

フォロー

blog-page_side_responsive

2020年5月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

アプリ情報

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