Vite対応テストフレームワークのVitestを使ってみた

レスキューナウ（24時間365日 災害･危機対応をサポート）

こんにちは！株式会社レスキューナウのシステム部に業務委託で参画しており、フロントエンド、バックエンド、インフラ構築などを担当している吉井です。

弊社のフロントエンド開発ではよくViteというツールを使用しています。

Viteとはフロントエンドのビルドツールで、
一部特徴を取り上げると以下のようなものが有ります。

  • ビルドが速い

Viteはビルドの処理速度がとても迅速です。
場合によっては検証などの為に繰り返しビルドを行うケースもあるので、
その時のストレスが無くなりとても快適です。

  • ローカルサーバを簡単に立てられる

HTMLとJavaScriptもしくはTypeScriptなどで書かれたコードを
簡単にローカルサーバ上でホスティングすることが出来る為
動作確認がとても楽です。
例えば、パッケージマネージャにyarnを使っている場合は

yarn dev


と、ターミナル上でコマンドを打つだけで簡単にホスティングすることが出来ます。これは本当に楽・・・。

  • Vue React Typescript などあらゆる環境に対応

Vue Reactなど複数のフロントエンドフレームワークに対応している為、
あらゆる環境に適用することが可能です。
現在だと

  • vue

  • react

  • vanilla

  • preact

  • lit

  • svelte
    これらのフレームワークに対応しているようです。
    ちなみに弊社ではVueを使うケースが多いですね！

Vitestについて

VitestはViteに正式対応しているテストフレームワークです。
Vitestは

https://github.com/vitest-dev/vitest/graphs/commit-activity

こちらのGitHubリポジトリにあるcommit-activityを見る限り
去年2021年の11月頃から開発がスタートしたようなので、
とても新しいツールです。
評判が良かったり将来性が高いとチームで判断された場合は、
こういう新しいツールも積極的に採用していくのが弊社の特徴ですね！

Vitestで個人的にとても便利だと感じる点は、このVitestだとソースコード内にVite特有の構文が有っても問題無くテスト実行出来る点ですね。

上記リンク先にあるimport.meta.env構文はVite特有のものになるのですが、
JavaScriptにおけるテストでよく使われるJestなどでは、
こちらの構文が含まれている場合はエラーが出てしまいます。
一応、そのエラーを回避する方法もあるにはあるのですが、
少々めんどくさいです。
その回避する手間が無くなるのは本当に便利です！

実際にVitestを使ってみよう

では、簡単なプログラムを書いて、実際にVitestを動かしてみましょう。

まず下記コマンドでViteのプロジェクトを作成し、
主要パッケージをインストールします。
環境は弊社のフロントエンド開発でよく使われるvue-tsを選択しました。

yarn create vite hoge --template vue-ts
cd hoge
yarn

Vitest、そしてDOMのレンダリングに使用するhappy-domというツールをインストールします

yarn add -D vitest happy-dom

vitestの設定を書き込むvitest.config.tsというファイルを作成し、以下の内容を記述します

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    global: true,
    environment: 'happy-dom',
  },
})

Vite特有の構文であるimport.meta.envを使う為に、.envファイルを作成し、以下の内容を記述します。

VITE_HOGE_STRING='hoge'

プロジェクト直下にlibディレクトリを作成、そしてそこにlib.tsファイルを作成し、テストに使用する為の以下の関数を記述します。

envCheckは.env内に記載されたVITE_HOGE_STRINGという環境変数を呼び出し、引数として渡されたtargetStringと等しいか確認した結果を返す関数、
calcは引数として渡されたtargetIntを2乗した結果を返す関数です。

export function envCheck(targetString: String) {
	const envString = import.meta.env.VITE_HOGE_STRING
	return envString == targetString
}

export function calc(targetInt: number) {
	return targetInt ** 2
}

lib.tsファイルと同じlibディレクトリに、lib.test.tsというテスト内容を記述するファイルを作成し、以下の内容を記述します。

import { envCheck,calc } from "./lib";
import { test, expect } from 'vitest';

test("envCheckTest",()=>{
	expect(envCheck("hoge")).toBeTruthy();});

test("calcTest",()=>{
	expect(calc(2)).toBe(4);});

Jestを使用したことがある人ならここで気付くと思いますが、記述の仕方がほぼJestと同じようになっています。ですので、Jestを使ったことがある人ならスムーズにVitestを使用することが出来ます。

最後にpackage.jsonファイルにテスト実行用のスクリプトを追加します。

    "test": "vitest"

追加後のpackage.jsonはこのようになります。

{
  "name": "hoge",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "test": "vitest"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.0",
    "happy-dom": "^6.0.4",
    "typescript": "^4.6.4",
    "vite": "^3.0.0",
    "vitest": "^0.20.2",
    "vue-tsc": "^0.38.4"
  }
}

最終的なプロジェクト内ファイル構成は以下のようになります。
(node_modules内はファイル数が多すぎる為、非表示にしてあります)

├── README.md
├── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── lib
│   │   ├── lib.test.ts
│   │   └── lib.ts
│   ├── main.ts
│   ├── style.css
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
├── vitest.config.ts
├── yarn-error.log
└── yarn.lock

それでは下記コマンドにより端末からテスト実行してみましょう。

yarn test

結果が以下のように出れば、正常にVitestが作動しています。

 ✓ src/lib/lib.test.ts (2)

Test Files  1 passed (1)
     Tests  2 passed (2)
      Time  1.79s (setup 0ms, collect 81ms, tests 4ms)


 PASS  Waiting for file changes...
       press h to show help, press q to quit

以上になります。
このVitest、Viteを使っているならば本当に便利なので、
よろしければ一度試してみて下さいね！

最後まで読んでいただき、ありがとうございました。

最後に
現在、レスキューナウでは、災害情報の提供、災害情報を活用した安否確認サービスなどのWebサービスの開発エンジニアを募集しています！
社員・フリーランスに関わらず、参画後に安心してご活躍できることを目指し、応募された方の特性・ご希望にマッチしたチームをご紹介します。
ちょっと話を聞いてみたい、ぜひ応募したい、など、当社にご興味を持っていただけましたら、お気軽にエントリーください！！