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


関連記事

Vue on Rails で作ったアプリを振り返ってみる

1 はじめに2 全体的なこと2.1 ディレクトリ構成2.2 CSSフレームワーク2.3 Capistranoでのデプロイ3 axiosのラッパー4 Vuex4.1 ログインの状態管理5 Router6 ...

Vercel AI SDK を試してみた

1 はじめに2 Vercel AI SDKとは3 実装例3.1 準備3.2 API3.3 画面4 ツール5 さいごに6 おすすめ書籍 はじめに Vercel AI SDKを使ってChatGPTの様なチ ...

Vue.js 3.0のComposition APIを使ってみた

1 はじめに1.1 Composition APIとは1.2 環境構築2 Composition API での書き方2.1 function2.2 computed2.3 watch2.4 lifec ...

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で ...

Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

1 はじめに1.1 Vue.jsとは1.2 インストール1.3 Vueアプリケーションを作る2 データを表示する2.1 文字列を表示する2.2 HTMLで表示する3 属性を指定する3.1 インラインス ...

フォロー

blog-page_side_responsive

2020年5月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

アプリ情報

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