ホームページ > ウェブフロントエンド > jsチュートリアル > Vitest フレームワークを使用してテストを作成するための最良のテクニック

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

Linda Hamilton
リリース: 2024-09-25 20:26:42
オリジナル
337 人が閲覧しました

Best Techniques to Create Tests with the Vitest Framework

単体テスト、統合テスト、エンドツーエンド テストはすべて、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 サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート