ヴィテストを選ぶ理由

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

スピード

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

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

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

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

互換性

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

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

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

---

Vitest のセットアップ

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

インストール

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

npm install --save-dev vitest

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

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

構(gòu)成

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',
  },
});

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

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

スクリプトの追加

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

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

---

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

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

例: React コンポーネント

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();
  });
});

テストの実行

次を使用してテストを?qū)g行します:
npm 実行テスト

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

---

高度な機(jī)能

嘲笑する

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

import { vi } from 'vitest';

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

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

スナップショットのテストは次のように簡(jiǎn)単です:

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 オプションを使用してパフォーマンスを測(cè)定します:
vitest --run --coverage

---

結(jié)論

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

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

參考文獻(xiàn)

Vitest ウェブサイト
ヴィテ

以上がVitest による?yún)g體テスト: 次世代のテスト フレームワークの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。