Vitest は最新の開発を念頭に置いて設計されています。それが目立つ理由は次のとおりです:
Vitest は Vite を基盤として活用し、その超高速ホット モジュール リプレースメント (HMR) とバンドルとトランスパイルに esbuild を利用します。その結果:
Vite の最適化されたビルド パイプラインを使用しているため、パフォーマンス ベンチマークでは、Vitest が一貫して Jest を大幅に上回っています。
Framework | Time to run 500 tests |
---|---|
Jest | ~8 seconds |
Vitest | ~3 seconds |
Mocha | ~6 seconds |
注: これらのベンチマークは、プロジェクトの複雑さとシステム仕様によって異なる場合があります。
Vitest は Jest と互換性があるため、最小限の変更で既存のテスト スイートの多くを再利用できます。また、TypeScript、JSX、ESM などの一般的なツールもすぐにサポートされます。
---
TypeScript プロジェクトでの Vitest のセットアップについて詳しく見ていきましょう。 React プロジェクトを使用してこれを示しますが、手順は Vue 3 または Node.js プロジェクトでも同様です。
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 は、テストを簡単に作成できる Jest のような API を提供します。簡単な例を次に示します:
React コンポーネントがあると想像してください:
// src/components/Greeting.tsx import React from 'react'; type GreetingProps = { name: string; }; export const Greeting: React.FC<GreetingProps> = ({ name }) => { return <h1>Hello, {name}!</h1>; };
コンポーネントのテスト ファイルを作成します:
// 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" />); 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" />); expect(container).toMatchSnapshot(); });
Vitest の CLI オプションを使用してパフォーマンスを測定します:
vitest --run --coverage
---
Vitest は、Vite を活用したスピード、シンプルさ、豊富な機能を提供する、最新のテストにとって魅力的な選択肢です。 Jest から移行する場合でも、新たに開始する場合でも、Vitest は優れた開発者エクスペリエンスを提供し、テストがコードと同じ速度で実行されることを保証します。
次のプロジェクトで Vitest を試して、違いを体験してください!
Vitest ウェブサイト
ヴィテ
以上がVitest による単体テスト: 次世代のテスト フレームワークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。