Vitestを導入してみた

新しいプロジェクトでVitestを導入してみたので紹介

PR

github.com

紹介

vitest.dev

• VitestはVite環境で動作する高速なテストフレームワーク
• 領域的にはJestと同じ
• 最新のテストフレームワークなので、細かいカスタマイズがされている

実装

以下のコマンドで追加

$ yarn add -D vitest

configは以下のように記載。

■ vitest.config.ts

/// <reference types="vitest" />
import { defineConfig } from "vitest/config";

// https://vitejs.dev/config/
export default defineConfig({
  test: {
    globals: true,
    environment: "happy-dom",
    setupFiles: ["./setupTests.ts"],
    dir: "src",
    css: true,
  },
});

テストコードの書き方は、ほぼJestと同じで、以下のように書ける。

■ src/components/organisms/History.test.tsx

import { describe, expect, test } from "vitest";
import { render, screen } from "@testing-library/react";
import History from "./History";

describe("src/components/organisms/History.tsx", () => {
  test("履歴を表示", () => {
    const props = {
      items: [
        {
          depth: 1,
          text: "Task 1",
          checked: false,
          checkedAt: null,
        },
      ],
    };
    render(<History {...props} />);

    expect(screen.getByText(/Task 1/i)).toBeTruthy();
  });
});

mockもJestと同様に使用できる。

vitest.dev

好みは別れるが、Rustみたいにコード上にテストコードを書くこともできる。

// the implementation
export function add(...args: number[]) {
  return args.reduce((a, b) => a + b, 0)
}

// in-source test suites
if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest
  it('add', () => {
    expect(add()).toBe(0)
    expect(add(1)).toBe(1)
    expect(add(1, 2, 3)).toBe(6)
  })
}

vitest.dev

テスト実行はデフォルトでwatchモードが起動されるので、起動して修正したらホットリロードされる。

以下のコマンドで実行でUIモードが起動。

$ vitest --ui

以下の画像みたいにブラウザ上でテスト実行やレポートの確認ができる。

以下のようにすれば、テストコードでデバッガも使用できる。

vitest.dev

と、いろいろ機能が揃っていてJestの標準の機能はほぼサポートしていつみたいなので、新しいプロジェクトではVitestを使用して行っても良いかも。