vitestを使用してテストコードを追加

vueを使用してフロントエンドを実装しているのですが、テストコードを組み込んでいなかったのでリグレッションテストは全て手動で実施していました。

規模も徐々に大きくなり、改修も頻繁に発生しそうなのでテストコードを組み込んで自動化しようと思います。

元々、viteを使用していたので今回はvitestを使用しようと思います。

参考：公式ページ

環境構築

公式ドキュメントに従って環境構築します。

まずはvitestインストール

npm install -D vitest
npm install -D @vue/test-utils
npm i -D @pinia/testing
npm i -D jsdom

vitest.config.ts ファイルを作成

import { defineConfig } from 'vitest/config';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'jsdom',
    coverage: {
      reporter: ['text', 'json', 'html']
    }
  },
});

package.jsonに以下を追加

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest"
  },

基礎知識

vitestとは

参考：公式ページ

JavaScript/TypeScript向けのテストフレームワーク。
Viteの開発サーバを活用してるので、当然viteプロジェクトと相性が良く、
前回からの差分のみを実行するので高速というのが特徴の様です。

@vue/test-utilsとは

参考：公式ページ

こちらはVue.js向けの公式単体テストライブラリ。

私の理解としては、生のJavaScriptの処理など基本的なところはvitestの機能を使用して、
画面とかvueのイベント関連のところはtest-utilsの機能を使うのかなくらいのイメージです。

@pinia/testingとは

参考：公式ページ

piniaというライブラリを使用している場合は、こちらを使用してテストするみたいです。
piniaは画面間でデータ連携する際にデータを格納したり、データに加工したりする処理を機能として持ってます。

jsdomとは

私の理解だと、仮想ブラウザを提供してくれるライブラリ。

テストコード作成

続いて具体的にテストで使用したスクリプトや命令のメモを記載していきます。

テストコードを記載するファイルは、

vueファイルのマウント

テストの中でvueファイルを仮想ブラウザで描画させてテストをするんですが、
そのためには、vueファイルをマウントする必要があります。

以下のような感じです。

mount(＜vue名>, {
      global: {
        plugins: [createTestingPinia({
          stubActions: false,
        })],
      },
    })

オプションはたくさんあるので詳しくは公式ドキュメントを確認してください。

const vm = mount(＜vue名>, {
      global: {
        plugins: [createTestingPinia({
          stubActions: false,
        })],
      },
    })

↑のように変数に格納することによって、そのあとに描画したDOMの情報を取得したりすることができます。

セレクタ

存在チェック

想定通りの要素が表示されているかチェック

モックの使い方

テストコード実行

プロンプトで以下のコマンドを実行

npm run test

エラー対応

[Vue warn]: inject() can only be used inside setup() or functional components.

そのうち調べる