Vitestでテストをする（準備編①）

Vitestとは

Vitestは、フロントエンド開発で広く使われるViteと密接に統合された次世代のテストフレームワークです。高速な起動と実行を特徴とし、従来のJestなどに比べて開発体験を大きく向上させます。ユニットテストやコンポーネントテストを簡潔に書けるだけでなく、モックやスナップショット、型定義との連携も強力で、TypeScript環境との相性が抜群です。また、Viteのエコシステムを活かしてブラウザ環境に近い形でテストを実行できるため、実際の挙動に近い検証が可能になります。さらに、直感的なAPIと豊富なプラグインにより、設定の手間を最小限に抑えつつ柔軟なテスト戦略を構築できます。開発速度と品質を両立させたいプロジェクトに最適な選択肢と言えるでしょう。

Vitestを入れるにあたり必要なもの

• Node.js

  • VitestはNode.js上で動作するため、最新のNode.jsをインストールしておく必要があります。

• Viteプロジェクト

• Vitest本体

  • 開発依存としてインストールします。
  • コマンド例:

    npm install -D vitest
    

• 設定ファイル

  • vite.config.ts にVitest用の設定を追記します。

    /// <reference types="vitest" />
    import { defineConfig } from 'vite'
    export default defineConfig({
      test: {
        globals: true,
        environment: 'jsdom',
      },
    })
    

実際のテスト実行

• テスト実行
  • コマンド例:

  npx vitest
  

次回

これをGitHubの公開ブランチに持っていく。
（力尽きた）

英訳版