はじめに

概要

VitestはViteを基盤とした次世代のテストフレームワークです。

プロジェクトの背景にある理論については、「なぜVitestなのか」のセクションで詳しく知ることができます。

オンラインでVitestを試す

StackBlitzでオンラインでVitestを試すことができます。ブラウザ上で直接Vitestが実行され、ローカル環境とほぼ同じですが、マシンに何もインストールする必要はありません。

プロジェクトにVitestを追加する

ビデオでインストール方法を学ぶ

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

ヒント

Vitest 1.0には、Vite >=v5.0.0 および Node >=v18.0.0 が必要です。

上記の方法のいずれかを使用して、package.jsonにvitestのコピーをインストールすることをお勧めします。ただし、vitestを直接実行したい場合は、npx vitestを使用できます（npxコマンドはnpmとNode.jsに付属しています）。

npxコマンドは、ローカルのnode_modules/.binからコマンドを実行するか、コマンドを実行するために必要なパッケージをインストールします。デフォルトでは、npxはコマンドが$PATHまたはローカルプロジェクトのバイナリに存在するかどうかを確認し、それを実行します。コマンドが見つからない場合は、実行前にインストールされます。

テストの記述

例として、2つの数値を加算する関数の出力を検証する簡単なテストを記述します。

// sum.js
export function sum(a, b) {
  return a + b
}

// sum.test.js
import { expect, test } from 'vitest'
import { sum } from './sum'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

ヒント

デフォルトでは、テストのファイル名には「.test.」または「.spec.」が含まれている必要があります。

次に、テストを実行するには、package.jsonに次のセクションを追加します。

{
  "scripts": {
    "test": "vitest"
  }
}

最後に、パッケージマネージャーに応じてnpm run test、yarn test、またはpnpm testを実行すると、Vitestは次のメッセージを出力します。

✓ sum.test.js (1)
  ✓ adds 1 + 2 to equal 3

Test Files  1 passed (1)
    Tests  1 passed (1)
  Start at  02:15:44
  Duration  311ms

Vitestの使用法について詳しくは、APIセクションをご覧ください。

Vitestの設定

Vitestの主な利点の1つは、Viteとの統合された設定です。存在する場合、vitestはルートのvite.config.tsを読み取り、Viteアプリと同じプラグインと設定を使用します。たとえば、Viteのresolve.aliasとプラグインの設定は、そのまま機能します。テスト中に異なる設定が必要な場合は、次のことができます。

• vitest.config.tsを作成します。これはより高い優先度を持ちます。
• --configオプションをCLIに渡します。例：vitest --config ./path/to/vitest.config.ts
• process.env.VITESTまたはdefineConfigのmodeプロパティを使用します（上書きされていない場合はtestに設定されます）。vite.config.tsで条件付きで異なる設定を適用できます。

Vitestは、Viteと同じ拡張子（.js、.mjs、.cjs、.ts、.cts、.mts）を構成ファイルでサポートしています。Vitestは.json拡張子をサポートしていません。

Viteをビルドツールとして使用していない場合は、構成ファイルのtestプロパティを使用してVitestを設定できます。

import {  } from 'vitest/config'

export default ({
  : {
    // ...
  },
})

ヒント

Viteを自分で使用していない場合でも、Vitestはその変換パイプラインにViteを大きく依存しています。そのため、Viteドキュメントで説明されている任意のプロパティも設定できます。

既にViteを使用している場合は、Vite構成にtestプロパティを追加します。また、構成ファイルの先頭にトリプルスラッシュディレクティブを使用して、Vitest型への参照を追加する必要があります。

/// <reference types="vitest" />
import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    // ...
  },
})

設定リファレンスで設定オプションのリストをご覧ください。

警告

ViteとVitestで2つの別々の構成ファイルを使用する場合、Vitest構成ファイルで同じViteオプションを定義するようにしてください。Vitest構成ファイルはViteファイルを拡張するのではなく上書きするためです。viteまたはvitest/configエントリのmergeConfigメソッドを使用して、Vite構成とVitest構成をマージすることもできます。

vitest.config.mjs

import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from './vite.config.mjs'

export default mergeConfig(viteConfig, defineConfig({
  test: {
    // ...
  }
}))

vite.config.mjs

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [Vue()],
})

ただし、2つの別々のファイルを作成する代わりに、ViteとVitestの両方で同じファイルを使用することをお勧めします。

ワークスペースのサポート

Vitestワークスペースを使用して、同じプロジェクト内で異なるプロジェクト構成を実行します。vitest.workspaceファイルでワークスペースを定義するファイルとフォルダのリストを定義できます。ファイルはjs/ts/json拡張子をサポートします。この機能はモノレポ設定でうまく機能します。

import {  } from 'vitest/config'

export default ([
  // you can use a list of glob patterns to define your workspaces
  // Vitest expects a list of config files
  // or directories where there is a config file
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // you can even run the same tests,
  // but with different configs in the same "vitest" process
  {
    : {
      : 'happy-dom',
      : './shared_tests',
      : 'happy-dom',
      : ['./setup.happy-dom.ts'],
    },
  },
  {
    : {
      : 'node',
      : './shared_tests',
      : 'node',
      : ['./setup.node.ts'],
    },
  },
])

コマンドラインインターフェース

Vitestがインストールされているプロジェクトでは、npmスクリプトでvitestバイナリを使用するか、npx vitestで直接実行できます。次に、スキャフォールディングされたVitestプロジェクトのデフォルトのnpmスクリプトを示します。

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

ファイルの変更を監視せずにテストを1回実行するには、vitest runを使用します。--portや--httpsのような追加のCLIオプションを指定できます。CLIオプションの完全なリストについては、プロジェクトでnpx vitest --helpを実行してください。

コマンドラインインターフェースの詳細をご覧ください。

IDE連携

Vitestを使用したテスト体験を向上させるために、Visual Studio Codeの公式拡張機能も提供しています。

VS Code Marketplaceからインストール

IDE連携の詳細をご覧ください。

例

Vitestを使用しているプロジェクト

• unocss
• unplugin-auto-import
• unplugin-vue-components
• vue
• vite
• vitesse
• vitesse-lite
• fluent-vue
• vueuse
• milkdown
• gridjs-svelte
• spring-easing
• bytemd
• faker
• million
• Vitamin
• neodrag
• svelte-multiselect
• iconify
• tdesign-vue-next
• cz-git

未リリースのコミットを使用する

最新機能をテストするために新しいリリースを待つことができない場合は、vitestリポジトリをローカルマシンにクローンし、自分でビルドしてリンクする必要があります（pnpmが必要です）。

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # you can use your preferred package manager for this step

次に、Vitestを使用しているプロジェクトに移動し、pnpm link --global vitest（またはvitestをグローバルにリンクするために使用したパッケージマネージャー）を実行します。

コミュニティ

質問がある場合やヘルプが必要な場合は、DiscordおよびGitHub Discussionsでコミュニティに連絡してください。