vue.jsをテストコードでUnite testを行いたかった。テストコードは、変更内容の影響を見極めるのに、大変有用で、工数コストも削減できることから、是非とも導入していきたい。
vueで用いられるテストライブラリには「jest」が使用されてきたが、開発ツールに「vite」を選択した場合、「import.meta.env.・・・」（.envから設定値を取得する箇所）でエラーとなってしまった。エラーメッセージはこんな感じ。
SyntaxError: Cannot use 'import.meta' outside a module回避する手段もあるようだが、調べてみると、「『vitest』を使いましょう」という記事があり、テストライブラリは「vitest」を採用することに決定。
テスト環境の構築も難しいことはなく、多くの部分で「jest」と互換性がある。
ここでは、そのテスト環境の構築方法の備忘録をメモ。既にviteでプロジェクトが構成されている前提でVitestを導入する手順を記載する。OSはWindows。
Vitestの導入
Vitestをインストールします。プロジェクトのルートディレクトリへ移動し、コマンドを実行。
npm install -D vitestコマンドからテストを実行できるようにする
「npm run test」のコマンドで、テストコードを実行できるように設定します。
「package.json」へ以下を記載します。既に、「script」のノードは存在するはずなので、scriptは以下の「test」を追記します。
{
"scripts": {
"test": "vitest"
}
}ここまでを確認。Vitestを実行して、以下の表示が出ればOK。以下のコマンドを実行。
npm run test
テストコードを実行してみる
簡単なテストコードを書いて実行してみます。ファイル名は「xxxx.test.js」のように、拡張子の手前に、「.test」又は「.spec」と入れれば、Vitestがテストコードと認識し、実行してくれるようです。
テストコードを配置するディレクトリの名称は何でも良さそうですが、ここではJestにならって「__tests__」とします。
以下のコードで、”__tests__/testCode.test.js”を作成しました。
import {it, expect} from 'vitest'
it('Test: Try testing', () =>{
expect( 2 * 2 ).toBe(4)
})続いて、「npm run test」を実行します。
テストが実行されました。
ちなみに、コードを以下のように変更すると不合格となります。
expect( 2 * 2 ).toBe(3)
これで、Vitestを実行するための最低限の環境が整いました。Vue3に対してJestの実行環境を整えようと思うと、諸々の設定で、ファイルを作成したり、package.jsonへの追記があったりと、面倒ごとがありましたが、Vitestは非常に簡単に導入ができました。
設定ファイルを用いることで、細かな設定を変更できますが、ここでは割愛します。
GUIでテスト結果を表示
GUIでテスト結果を表示することも可能です。「package.json」に記載した”test”ノードの値を以下に変更します。
{
"scripts": {
"test": "vitest --ui"
}
}「npm run test」を実行すると以下のように、エラーが表示され、必要なパッケージのインストールを求められますので、「y」を入力して続行。
「@vitest/ui」のインストールが行われます。
インストール完了後、再度「npm run test」を実行。
すると、ブラウザが起動し、以下のような表示が現れます。
Vitestが実行された状態でNodeが稼働しているので、コードの修正が即座に反映されてきます。
テストコードを以下に戻します。
expect( 2 * 2 ).toBe(4)
このように、機能追加も楽なので、使い勝手のいいテストツールだと思います。
まとめ
- 「npm install -D vitest」でインストール
- package.jsへ「npm run test」のコマンドを定義。
- テストコードはJestと互換あり。
- 機能追加はvitestが自動でインストールしてくれる
こんな感じです。
コメント