Vitest フレームワークを使用してテストを作成するための最良のテクニック

単体テスト、統合テスト、エンドツーエンド テストはすべて、Vite 用に設計された迅速で最新のテスト フレームワークである Vitest によってサポートされています。 React や Vue などの最新の JavaScript ライブラリとスムーズに統合されているため、セットアップを必要とせずにテストを作成するための迅速かつ効果的な手段が提供されます。 Vitest フレームワークを使用して、信頼性が高く、管理しやすく、効果的なテストを作成するための最良の方法については、この記事で説明します。

1. Vitest のセットアップ

高度なテクニックに入る前に、Vitest を使用して簡単なプロジェクトをセットアップしてみましょう。プロジェクトに Vite を使用している場合、Vitest は最小限のセットアップですぐに使用できるように設計されています。

ステップ 1: Vitest をインストールする

Vitest をインストールするには、プロジェクト ディレクトリで次のコマンドを実行します。

npm install vitest --save-dev

ステップ 2: 簡単なテストを作成する

インストールしたら、Vitest の動作を確認するための簡単なテスト ファイルを作成します。

import { describe, it, expect } from 'vitest';

describe('Math Functions', () => {
  it('should add two numbers correctly', () => {
    const sum = 1 + 2;
    expect(sum).toBe(3);
  });
});

次のコマンドを使用してテストを実行します:

npx vitest

2. Describe ブロックと It ブロックを使用してテストを整理する

describe ブロックと it ブロックは、Vitest (および Jest などの他の多くのテスト フレームワーク) の基本です。これらはテストを論理的に整理し、読みやすくするのに役立ちます。

describe: 関連するテストをグループ化するために使用されます。
it: 記述ブロック内で個々のテスト ケースを定義します。
この構造により、テスト ケースが適切に整理され、テスト スイートの成長に合わせて保守しやすくなります。

describe('User Authentication', () => {
  it('should login with valid credentials', () => {
    // Test login functionality
  });

  it('should fail to login with invalid credentials', () => {
    // Test invalid login functionality
  });
});

3.依存関係のモック

最新のアプリケーションでは、多くの場合、テストで API、データベース、サードパーティ ライブラリなどの外部サービスをシミュレートする必要があります。 Vitest は、依存関係のモックに対するネイティブ サポートを提供しており、テストする動作を分離するのに役立ちます。

API 呼び出しのモック例

実際に外部サービスを呼び出さずに関数をシミュレートするために、Vitest の vi.fn を使用して単純な API 呼び出しをモックしてみましょう。

import { vi } from 'vitest';
import { fetchUserData } from './api';

vi.mock('./api', () => ({
  fetchUserData: vi.fn(),
}));

describe('User API', () => {
  it('should fetch user data correctly', async () => {
    const mockUserData = { id: 1, name: 'John Doe' };
    fetchUserData.mockResolvedValueOnce(mockUserData);

    const result = await fetchUserData(1);
    expect(result).toEqual(mockUserData);
  });
});

この例では、fetchUserData 関数をモックして、応答を制御し、実際の API 呼び出しを回避できるようにします。

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

Vitest はスナップショット テストをサポートしています。これは、コンポーネントまたは関数の出力を時間の経過とともに検証する場合に役立ちます。この手法は、UI コンポーネントに特に有益です。

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

import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should match the snapshot', () => {
    const { container } = render(<MyComponent />);
    expect(container).toMatchSnapshot();
  });
});

スナップショット テストにより、コンポーネントの出力の一貫性が保たれることが保証されます。出力が変更された場合は、スナップショットを更新するように求められ、意図しない変更を検出するのに役立ちます。

5.非同期コードのテスト

非同期関数をテストする場合、Vitest は Promise を処理するユーティリティを提供するため、非同期コードが期待どおりに動作することを簡単に確認できます。

非同期関数の例のテスト

import { describe, it, expect } from 'vitest';

const fetchData = async () => {
  return new Promise((resolve) => setTimeout(() => resolve('data'), 1000));
};

describe('Async Functions', () => {
  it('should resolve data', async () => {
    const data = await fetchData();
    expect(data).toBe('data');
  });
});

この手法は、API リクエスト、タイマー、またはその他の非同期コードをテストする場合に非常に重要です。

6.コードカバレッジ

Vitest は、すぐに使用できるコード カバレッジ レポートの生成をサポートしています。これは、コードベースのどの程度がテストでカバーされているかを理解するのに役立ちます。コードのどの部分がテストされ、どの部分がテストされていないのかが示されます。

コード カバレッジの有効化

コード カバレッジを有効にするには、Vitest 構成に次の内容を追加します。

// vite.config.js or vitest.config.js
export default {
  test: {
    coverage: {
      reporter: ['text', 'html'],
    },
  },
};

カバレッジを指定してテストを実行します:

npx vitest --coverage

これによりカバレッジ レポートが生成され、コードのどの領域にさらにテストが必要かを分析できます。

7.パラメータ化されたテスト

パラメータ化テストは、異なる入力と予想される出力を含む単一のテスト ケースを実行するための優れた方法です。これにより、コードの重複が減り、さまざまなシナリオに対して関数が正しく動作することが保証されます。

パラメータ化されたテストの例

describe.each([
  [1, 2, 3],
  [2, 3, 5],
  [5, 5, 10],
])('Math Operations', (a, b, expected) => {
  it(`should add ${a} and ${b} to equal ${expected}`, () => {
    expect(a + b).toBe(expected);
  });
});

describe.each を使用すると、単一のテスト ケースでさまざまな入力セットと予想される出力を反復処理できるため、テストがより DRY (Don'trepeat Yourself) になります。

8.テスト ライブラリを使用した React コンポーネントのテスト

Vitest は、React コンポーネントをテストするための一般的なツールである React Testing Library とうまく連携します。実装の詳細ではなく、コンポーネントの動作をテストすることを奨励します。

React コンポーネントのテストの例

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import MyButton from './MyButton';

describe('MyButton Component', () => {
  it('should render correctly', () => {
    render(<MyButton />);
    expect(screen.getByText('Click Me')).toBeInTheDocument();
  });

  it('should call onClick when clicked', () => {
    const handleClick = vi.fn();
    render(<MyButton onClick={handleClick} />);
    screen.getByText('Click Me').click();
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Vitest を使用して React コンポーネントをテストすると、ボタン、入力、その他の要素を操作するときに UI が期待どおりに動作することが保証されます。

結論

With no setup required, the Vitest framework offers a robust, contemporary testing experience. You may build dependable and effective test suites by adhering to best practices, which include using describe blocks to organize tests, simulating external services, and utilizing snapshot testing. Furthermore, methods like enabling code coverage, testing React components, and testing asynchronous code will guarantee that your application is well-tested and maintainable.

以上がVitest フレームワークを使用してテストを作成するための最良のテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。