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 3とVuex 4とTypeScriptでタイプセーフに開発する

1 はじめに1.1 インストール1.2 Storeの設定2 Storeの作成3 StoreをComponentから使用する4 $storeプロパティに型をつける5 さいごに6 おすすめ書籍 はじめに ...

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

ざっとPWAの概要を調べてみる

1 はじめに2 ProgressiveWebAppsとは3 PWAに必要な技術4 PWAとセットでよく出てくる「AMP」とは5 ネイティブアプリ vs PWA6 さいごに はじめに ここ最近、Andr ...

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

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

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 なぜ ...

フォロー

blog-page_side_responsive

2020年5月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

アプリ情報

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