Vitest による単体テスト: 次世代のテスト フレームワーク

ヴィテストを選ぶ理由

Vitest は最新の開発を念頭に置いて設計されています。それが目立つ理由は次のとおりです:

スピード

Vitest は Vite を基盤として活用し、その超高速ホット モジュール リプレースメント (HMR) とバンドルとトランスパイルに esbuild を利用します。その結果:

• スマート & インスタント ウォッチ モード: テストは影響を受けるファイルに対してのみ再実行され、フィードバック ループが瞬時に行われます。
• すぐに使える ESM サポート: 最新のプロジェクトは、ハッキングなしで ES モジュールを直接サポートすることで恩恵を受けます。

Vite の最適化されたビルド パイプラインを使用しているため、パフォーマンス ベンチマークでは、Vitest が一貫して Jest を大幅に上回っています。

Framework	Time to run 500 tests
Jest	~8 seconds
Vitest	~3 seconds
Mocha	~6 seconds

注: これらのベンチマークは、プロジェクトの複雑さとシステム仕様によって異なる場合があります。

互換性

Vitest は Jest と互換性があるため、最小限の変更で既存のテスト スイートの多くを再利用できます。また、TypeScript、JSX、ESM などの一般的なツールもすぐにサポートされます。

開発者のエクスペリエンス

• Vite の HMR と統合されているため、テストを高速に繰り返すことができます。
• シンプルな API と構成。
• 豊かなエコシステムと成長するコミュニティサポート。

---

Vitest のセットアップ

TypeScript プロジェクトでの Vitest のセットアップについて詳しく見ていきましょう。 React プロジェクトを使用してこれを示しますが、手順は Vue 3 または Node.js プロジェクトでも同様です。

インストール

1. Node.js と npm/yarn/pnpm がインストールされていることを確認してください。
2. Vitest とそのピアの依存関係をインストールします:

npm install --save-dev vitest

React を使用するプロジェクトの場合は、React テスト ライブラリも必要です。

npm install --save-dev @testing-library/react @testing-library/jest-dom

構成

Vite.config.ts を作成または更新して Vitest を有効にします:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom', // Use 'node' for Node.js projects
    setupFiles: './test/setup.ts',
  },
});

セットアップファイルの追加

セットアップ ファイルは、テスト環境を構成するために使用されます。 test/setup.ts ファイルを作成します:
import '@testing-library/jest-dom';

スクリプトの追加

package.json を更新してテスト スクリプトを含めます:

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

---

Vitest を使用して単体テストを作成する

Vitest は、テストを簡単に作成できる Jest のような API を提供します。簡単な例を次に示します:

例: React コンポーネント

React コンポーネントがあると想像してください:

// src/components/Greeting.tsx
import React from 'react';

type GreetingProps = {
  name: string;
};

export const Greeting: React.FC<greetingprops> = ({ name }) => {
  return <h1 id="Hello-name">Hello, {name}!</h1>;
};
</greetingprops>

ライティングテスト

コンポーネントのテスト ファイルを作成します:

// src/components/__tests__/Greeting.test.tsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Greeting } from '../Greeting';

describe('Greeting Component', () => {
  it('renders the correct greeting', () => {
    render(<greeting name="Vitest"></greeting>);
    expect(screen.getByText('Hello, Vitest!')).toBeInTheDocument();
  });
});

テストの実行

次を使用してテストを実行します:
npm 実行テスト

次のような出力が表示されます:
✓ 挨拶コンポーネントは正しい挨拶をレンダリングします

---

高度な機能

嘲笑する

Vitest はモジュールと関数のモックを直接サポートしています:

import { vi } from 'vitest';

const mockFn = vi.fn();
mockFn();
expect(mockFn).toHaveBeenCalled();

スナップショットのテスト

スナップショットのテストは次のように簡単です:

import { render } from '@testing-library/react';
import { expect } from 'vitest';
import { Greeting } from '../Greeting';

test('matches snapshot', () => {
  const { container } = render(<greeting name="Vitest"></greeting>);
  expect(container).toMatchSnapshot();
});

パフォーマンステスト

Vitest の CLI オプションを使用してパフォーマンスを測定します:
vitest --run --coverage

---

結論

Vitest は、Vite を活用したスピード、シンプルさ、豊富な機能を提供する、最新のテストにとって魅力的な選択肢です。 Jest から移行する場合でも、新たに開始する場合でも、Vitest は優れた開発者エクスペリエンスを提供し、テストがコードと同じ速度で実行されることを保証します。

次のプロジェクトで Vitest を試して、違いを体験してください!

参考文献

Vitest ウェブサイト
ヴィテ

以上がVitest による単体テスト: 次世代のテスト フレームワークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。