Remix に Vitest を導入する
目的
Remix を使用したフルスタックアプリケーションを開発します。
この記事では、既に存在するアプリケーションに Vitest を導入します。
環境
| 環境 | バージョン |
|---|---|
| Node.js | 20.11.1 |
| Yarn | 4.1.1 |
| Remix | 2.8.1 |
| Vite | 5.1.0 |
| Vitest | 1.4.0 |
Vitest 初期設定
Vitest をインストールします。
yarn add -D vitest
package.json ファイルの scripts フィールドに対して、以下のコードを追記します。
{
"scripts": {
"test": "vitest"
}
}
Vitest 動作確認
動作確認用として、_index.test.ts ファイルを作成します。
touch app/_index.test.ts
_index.test.ts ファイルに対して、以下のコードを記述します。
import { expect, test } from 'vitest';
function sampleFunction(a: number, b: number) {
return a + b;
}
test('adds 1 + 2 to equal 3', () => {
expect(sampleFunction(1, 2)).toBe(3);
});
テスト実行します。
yarn test
以下の出力を得られたら完了です。
✓ app/_index.test.ts (1)
✓ adds 1 + 2 to equal 3
Test Files 1 passed (1)
Tests 1 passed (1)
Start at 12:10:18
Duration 192ms (transform 36ms, setup 0ms, collect 12ms, tests 1ms, environment 0ms, prepare 61ms)
PASS Waiting for file changes...
press h to show help, press q to quit
テスト関数 import 省略設定
概要
テストファイル作成する度に、以下の import 文を入力するのは面倒です。
そのため、 import 不要にできるよう設定します。
import { expect, test } from 'vitest';
作業
vite.config.ts に以下の設定を追記します。
export default defineConfig({
+ test: {
+ globals: true,
+ },
});
tsconfig.json に以下の設定を追記します。
{
"compilerOptions": {
"types": [
+ "vitest/globals"
]
}
}
テスト実行して、先ほどと同じ出力を得られたら完了です。
yarn test
おまけ: VSCode と統合
概要
VSCode でテストファイルを開くと、 GUI でテストが実行可能になります。
便利なので設定しておきます。
作業
VSCode 拡張機能 Vitest をインストールします。
テストファイルを開き、以下動画のように実行してみます。
もし有効にならない場合、 VSCode を再起動してみてください。
おまけ: Vitest 用設定ファイル作成
概要
Vitest は yarn test 実行時、 vite.config.ts ファイルを参照します。
そして vite.config.ts 参照時、test フィールドの設定を適用します。
しかし、vitest.config ファイルが同時に存在すると vitest.config が優先することから、test 用の設定を分離するために設定します。
ただし、必須設定でないため、好みの設定となります。
Vite と Vitest の設定を別々に用意する場合、 vitest.config は vite.config の設定を上書きする必要があるため、公式は同じ設定ファイルの使用を推奨しています。
作業
vite.config.ts ファイルから、以下の記述を削除します。
{
- test: {
- globals: true,
- },
}
vitest.config.ts ファイルを生成します。
touch ./vitest.config.ts
vitest.config.ts ファイルに以下の通り記述します。
import { defineConfig, mergeConfig } from 'vite';
import baseViteConfig from './vite.config';
export default mergeConfig(
baseViteConfig,
defineConfig({
test: {
globals: true,
},
})
);
テスト実行して、先ほどと同じ出力を得られたら完了です。
yarn test
まとめ
実装後のリポジトリは以下の通りです。
追記
Pull Request では app/routes/_index.test.ts と作成しましたが、 app/_index.test.ts と読み替えてください。
Remix はファイルベースルーティングであり routes フォルダ配下を URL と認識することから、テストファイルを作成すると Remix サーバ起動時にエラーが発生します。
もし routes フォルダにテストファイルを配置したい場合は、 vite.config において以下の設定を追記するとテスト用ファイルを無視するため、 Remix サーバを起動できます。
remix.config.js | Remix
export default defineConfig({
plugins: [
remix({
+ ignoredRouteFiles: ['**/*.test.ts'],
}),
tsconfigPaths(),
],
});
Discussion