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

by

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"
  },

コメントする