初心者向けVue.jsでテストツール導入からテスト実行までの流れ

◾️ はじめに

　Vue.jsを学習中のエンジニアです👩🏻‍💻
社内でテストを行うことがあったので、導入からテスト実行までまとめてみました！
これからVue.jsでユニットテストするという方の役に立てたらと思っています。

◾️ ユニットテスト(単体テスト)とは

• 専用のツールを利用し、プログラムを構成する比較的小さな単位(関数、メソッド)が個々の機能を正しく果たしているかどうかを検証するテストのことです。

Vue.jsのテストを行う上で使用するツール

Vitest
Viteの生態系に統合されたテストランナーで、JavaScriptやTypeScriptのテストを行うためのモダンで高速なフレームワークです。
目的：JavaScript/TypeScriptコードの包括的なテスト
使用範囲：ユニットテスト、統合テスト、スナップショットテスト、モジュールモックなど、フロントエンドおよびバックエンドのコード全般をカバーします。

Vue Test Utils
Vue Test Utilsとは、Vue.jsの公式テストユーティリティライブラリで、Vueコンポーネントの単体テストを行うためのツールです。
目的：Vue.jsコンポーネントの詳細なテスト
使用範囲：コンポーネントのレンダリング、イベントハンドリング、ステート管理、プロパティの挙動など、Vueコンポーネントのテストに特化しています。

これらのツールを組み合わせて使用するのがオススメです✨
vue-test-utilsでVueコンポーネントをテストし、Vitestをテストランナーとして使用することで、Vueコンポーネントの詳細なテストと、JavaScript/TypeScriptコード全体のユニットテストを一元的に行えます！

◾️ テストを行う上で使用するツール導入方法

Vitestの導入手順

1.プロジェクトにVitestをインストールする

インストールコマンドはご使用しているものをインストールしてください。

npm install --save-dev vitest @vitejs/plugin-vue

yarn add --dev vitest @vitejs/plugin-vue

２.Vite の設定を変更する

vite.config.tsファイルを編集して、testセクションを追加します。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './test/setup.ts',
    include: ['**/*.spec.ts'],
  },
})

※setupFiles は、テストが実行される前に実行されるスクリプトを指定するための設定です。ここには、テスト前に実行する必要がある初期化コードや、複数のテストで共通する設定を記述します。
例えば、以下のような初期化を行うことができます。

• グローバルモックの設定
• グローバル変数や関数の定義
• テスト環境の調整
• ライブラリの初期化

３.テストの設定を追加する

testディレクトリを作成し、setup.ts などの設定ファイルを追加します。

test/setup.ts

import '@testing-library/jest-dom'

４. テストスクリプトを追加する

package.json にテストスクリプトを追加します。

package.json

{
  "scripts": {
    "test": "vitest"
  }
}

５.テストファイルを作成する

①テストファイルを格納するフォルダをsrcフォルダ内の任意の場所に作成
例）srcフォルダの直下にtestフォルダを作成

②テストファイルを作成する
→拡張子がspec.tsファイル作成

Vue Test Utils の導入手順

1.プロジェクトに Vue Test Utils をインストールする

npm install --save-dev @vue/test-utils vitest @testing-library/vue

2.テスト用の設定を行う

テストランナーとしてVitestを使用する設定を行います。vite.config.tsファイルを編集して、以下の設定を追加します。

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './test/setup.ts',
    include: ['**/*.spec.ts'],
  },
})

以降の設定はVitestの導入手順と同様のため、割愛します。

◾️ ユニットテストの作成と実行

実際にどのようにユニットテストを行うのか、例を元に説明します。
まず、引数として２つの数値を受取し、割り算の結果を返す関数を作成します。

.modules/divideNumbers.ts

export function divideTwoNum(num1: number, num2: number): number {
 return num1 / num2
}

次に、src配下にtestフォルダを作成し、テストを実行する関数名を元にテストファイルを作成します。

.test/divideNumbers.spec.ts

import {describe, test, expect} from 'vitest'
import {divideTwoNum} from '@/modules/divideNumbers'

describe(
 "divideNumbers.tsのdivideTwoNum（）関数のテスト",
 () => {
   test(
    "単純な割り算の場合のテスト",
    () => {
    const num1 = 6
    const num2 = 3
    const actual = divideTwoNum(num1, num2)
    const expectedResult = 2
    expect(actual).toBe(expectedResult)
   }
  )
 }
)

最後に実行します！

npm run test

※テストを継続して実行させたい場合は、以下のコマンドでテストを実行してください！

npm run watch

◾️ ユニットテストの結果

ユニットテスト実行の結果は、ターミナルに表示されます。
実際にテストを実行すると以下のように表示されます。

どのような内容が表示されているのか解説します。

• ✔️ src/tests/divideNumbers.spec.ts(1)
  実行したファイルとテストが成功したのかどうかを表します。
  ※複数のファイルを実行した場合は、右端の（1）の数字が、（２）、（３）のように変わります。

• Test Files 1 passed(1)
  何個のテストファイルを実施したのか、そのうち何個成功したのかを表します。

• Tests 1 passed(1)
  何個のテストを実施したか、そのうち何個が成功したのかを表します。

Vitestでは１つのテストファイル中に複数のテストが記述可能なため、このような表記になっています。

失敗すると以下のような表示になります。
※関数の中身を割り算ではなく、掛け算に書き換えあえて失敗させています。

• src/tests/divideNumbers.spec.ts(1)
  成功した際に表示されていた「✔️」がないことから失敗だとわかります。

• ✖️ 単純な割り算の場合のテスト
  失敗したテストケース名が表示されます。

• Faild Tests 1
  失敗したテストコケースごとに失敗内容が具体的に表示されます。

• Test Files 1 failed (1)
  何個のテストファイルを実施し、そのうち何個失敗したのかを表します。

• Tests 1 failed (1)
  何個のテストケースを実施し、そのうち何個が失敗したのか表します。
  ※失敗と成功が混在している場合は「3 failed | 1 passed(2)」のように表示されます。

◾️ おわりに

今回は、Vue.jsでユニットテストを行うための導入手順から実行方法までを紹介しました。
この記事を参考に、初めての方でもスムーズにテスト環境を整え、実際にテストを実行していただければ嬉しいです☺️