2023/02/26 (更新日: 2023/04/02)

【2023年最新版】Vue.jsとJestでの単体テストのコードの書き方を解説

こんにちは。masakiです。
今回は、Vue.jsとJestで単体テストを書く方法について解説します。
今回は、Vue.jsの勉強をしてコードを書くことはできるようになったけど、単体テストのコードをどうやって書いていったら良いかがわからないという方を対象読者にしています。

単体テストをする意義

まず、単体テストのコードの書き方を解説する前に、そもそもなぜテストコードを書かないといけないのかについて触れておきたいと思います。
結論から言うと、テストコードを書く理由は、本番環境のコードのリグレッション（新規で機能を追加した時に、今まで動いていた箇所が動かなくなること）を防ぐためです。

つまり、テストとは要するにソフトウェアの変更を確実に行なっていくための技術なのです。

ここで、テストコードが全くない場合のことをイメージしてもらうと良いのですが、このようなケースでは新規で機能を追加するたびに別の箇所でバグが発生するといった、目も当てられないような状況に陥ります。こうなってしまうと、少し機能を追加するだけでも大変になってしまい、開発の生産性がはるかに落ちてしまいます。

使用するライブラリ

前置きはさておき、それでは早速Vue.jsでの単体テストの書き方について解説していきます。
Vue.jsで単体テストを書くには、大きく分けて２つのライブラリを用いるのが一般的です。

Jest（もしくはvitest）
vue-test-utils

Jest

JestはJavaScriptのテスト用ライブラリです。（TypeScriptももちろんサポートしています。）
基本的には、マッチャーと呼ばれる関数を使って、実際の値と予測値が同じかどうかを判定することでテストをしていきます。
最近ではVietestというライブラリも出てきていますが、基本的な書き方はあまりJestと変わりません。
なので、今回はJestを使って単体テストの解説をしていきます。

vue-test-utils

Jest以外には、vue-test-utilsというライブラリを用います。
これは何のために用いるかというと、テストしたいコンポーネントのインスタンスを取得するためです。
このインスタンスを取得することで、インスタンス内のリアクティブな変数（つまり、コンポーネント内で使われるリアクティブな変数）を扱うことができます。

つまり、テストするコンポーネントで扱っているデータを取ってくるのがvue-test-utilsの役割です。

単体テストの流れ

単体テストの流れは以下のとおりです。

テストしたいコンポーネントをマウントによって取得する
テストしたい値を取得
実際の値と予測値がマッチしているかどうかを判定する

サンプルコード

例えば、以下のようなForm.vueがあるとします。

このForm.vueに対して、
Form.test.jsというテストファイルを書いていきます。


import { shallowMount } from "@vue/test-utils";
import Form from "@/components/Form.vue";

describe("test", () => {
  it("username test", () => {
    const wrapper = shallowMount(Form);

    const usernameElement = wrapper.get(".username");
    expect(usernameElement.element.value).toBe("");
  });

  it("password test", () => {
    const wrapper = shallowMount(Form);

    const passwordElement = wrapper.get(".password");
    expect(passwordElement.element.value).toBe("");
  });
}));

上記のコードについて説明します。

まずdescribe()メソッドは、１つ１つのテストケースをまとめるためのメソッドです。今回の例では、it()メソッドの中身が個々のテストケースです。
it()では、入力フォーム中のユーザー名およびパスワードの値が空文字であるかどうかを判定しています。
vue-test-utilsには大きく分けてshallowMount()とmount()という２つのメソッドがありますが、ここでは子コンポーネントをスタブ化するshallowMount()の方を用いています。このメソッドで取得したコンポーネントのインスタンスを、wrapperという変数に格納しています。