ホームページ ウェブフロントエンド jsチュートリアル Vitest を使用した React アプリケーションのテスト: 包括的なガイド

Vitest を使用した React アプリケーションのテスト: 包括的なガイド

Aug 28, 2024 am 06:01 AM

Testing React Applications with Vitest: A Comprehensive Guide

テストは最新のソフトウェア開発の重要な側面であり、コードが期待どおりに動作することを確認し、アプリケーションの進化に伴う回帰を防ぎます。 React エコシステムでは、Vitest などのツールが、最新の React アプリケーションとシームレスに統合される、高速かつ強力で使いやすいテスト フレームワークを提供します。この投稿では、Vitest をセットアップして使用して、React コンポーネント、フック、ユーティリティを効果的にテストする方法を説明します。


1. ヴィテストの紹介

Vitest は、最新の JavaScript および TypeScript プロジェクト、特にビルド ツールとして Vite を使用するプロジェクト向けに構築された超高速のテスト フレームワークです。 Vitest は、React コミュニティで最も人気のあるテスト フレームワークの 1 つである Jest からインスピレーションを得ていますが、速度とシンプルさのために最適化されているため、Vite を利用した React プロジェクトに最適です。

主な特徴:

  • 高速実行: Vitest はテストを並行して実行し、Vite の高速ビルド機能を活用します。
  • ネイティブ ESM サポート: Vitest は最新の JavaScript 向けに設計されており、すぐに使える ES モジュールのサポートを提供します。
  • Jest との互換性: Jest に慣れている場合は、Vitest の API に馴染みがあり、移行がスムーズになるでしょう。
  • 組み込みの TypeScript サポート: Vitest は TypeScript をネイティブにサポートし、テストでタイプ セーフティを提供します。

2. React プロジェクトでの Vitest のセットアップ

React プロジェクトで Vitest をセットアップすることから始めましょう。 Vite を使用して React アプリを作成したと仮定します。そうでない場合は、次のコマンドを使用してすぐに作成できます:

npm create vite@latest my-react-app -- --template react
cd my-react-app
ログイン後にコピー

ステップ 1: Vitest と関連する依存関係をインストールする

Vitest を React Testing Library およびその他の必要な依存関係とともにインストールします。

npm install --save-dev vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event
ログイン後にコピー
  • vitest: テスト フレームワーク。
  • @testing-library/react: React コンポーネントをテストするためのユーティリティを提供します。
  • @testing-library/jest-dom: DOM ノード アサーション用のカスタム マッチャーを Jest と Vitest に追加します。
  • @testing-library/user-even: DOM とのユーザー操作をシミュレートします。

ステップ 2: Vitest を構成する

次に、プロジェクトのルートで vitest.config.ts ファイルを作成または変更して、Vitest を構成します。

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

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/setupTests.ts',
  },
});
ログイン後にコピー
  • 環境: 'jsdom': テスト用にブラウザ環境をモックします。
  • globals: true: インポートせずに、describe、it、expect などのグローバル変数を使用できるようにします。
  • setupFiles: Jest の setupFilesAfterEnv に似た、テスト構成をセットアップするためのファイル。

ステップ 3: セットアップ ファイルを作成する

src ディレクトリに setupTests.ts ファイルを作成して、@testing-library/jest-dom を構成します。

import '@testing-library/jest-dom';
ログイン後にコピー

このセットアップでは、jest-dom によって提供されるカスタム マッチャーがテストに自動的に組み込まれます。


3. React コンポーネントのテストの作成

Vitest をセットアップしたら、単純な React コンポーネント用のテストをいくつか書いてみましょう。次の Button コンポーネントについて考えてみましょう:

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

type ButtonProps = {
  label: string;
  onClick: () => void;
};

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;
ログイン後にコピー

次に、このコンポーネントのテストを作成しましょう:

// src/components/Button.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Button from './Button';

describe('Button Component', () => {
  it('renders the button with the correct label', () => {
    render(<Button label="Click Me" onClick={() => {}} />);
    expect(screen.getByText('Click Me')).toBeInTheDocument();
  });

  it('calls the onClick handler when clicked', async () => {
    const handleClick = vi.fn();
    render(<Button label="Click Me" onClick={handleClick} />);
    await userEvent.click(screen.getByText('Click Me'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});
ログイン後にコピー

説明:

  • render: テスト用にコンポーネントをレンダリングします。
  • 画面: レンダリングされた DOM をクエリします。
  • userEvent.click: ボタンのクリック イベントをシミュレートします。
  • vi.fn(): 関数をモックしてその呼び出しを追跡します。

4. テストの実行

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

npx vitest
ログイン後にコピー

これにより、デフォルトでパターン *.test.tsx または *.spec.tsx に従うすべてのテスト ファイルが実行されます。以下を使用して監視モードでテストを実行することもできます:

npx vitest --watch
ログイン後にコピー

Vitest は詳細な出力を提供し、各テストのステータスと発生したエラーを示します。


5. フックとカスタム ユーティリティのテスト

Vitest は、カスタム React フックとユーティリティのテストにも使用できます。カスタムフック useCounter:
があるとします。

// src/hooks/useCounter.ts
import { useState } from 'react';

export function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);

  return { count, increment, decrement };
}
ログイン後にコピー

このフックのテストは次のように作成できます:

// src/hooks/useCounter.test.ts
import { renderHook, act } from '@testing-library/react-hooks';
import { useCounter } from './useCounter';

describe('useCounter Hook', () => {
  it('initializes with the correct value', () => {
    const { result } = renderHook(() => useCounter(10));
    expect(result.current.count).toBe(10);
  });

  it('increments the counter', () => {
    const { result } = renderHook(() => useCounter());
    act(() => {
      result.current.increment();
    });
    expect(result.current.count).toBe(1);
  });

  it('decrements the counter', () => {
    const { result } = renderHook(() => useCounter(10));
    act(() => {
      result.current.decrement();
    });
    expect(result.current.count).toBe(9);
  });
});
ログイン後にコピー

説明:

  • renderHook: テスト環境で React フックをレンダリングします。
  • act: アサーションを行う前に、状態または効果への更新が確実に処理されるようにします。

6. 結論

Vitest は、特に Vite のような最新のツールと組み合わせた場合に、React アプリケーションをテストするための強力かつ効率的な方法を提供します。そのシンプルさ、スピード、既存の Jest プラクティスとの互換性により、小規模および大規模な React プロジェクトにとって優れた選択肢となります。

By integrating Vitest into your workflow, you can ensure that your React components, hooks, and utilities are thoroughly tested, leading to more robust and reliable applications. Whether you’re testing simple components or complex hooks, Vitest offers the tools you need to write effective tests quickly.

For more information, visit the Vitest documentation.

Feel free to explore more advanced features of Vitest, such as mocking, snapshot testing, and parallel test execution, to further enhance your testing capabilities.

Happy Coding ?‍?
ログイン後にコピー

以上がVitest を使用した React アプリケーションのテスト: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

javascriptの分解:それが何をするのか、なぜそれが重要なのか javascriptの分解:それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

誰がより多くのPythonまたはJavaScriptを支払われますか? 誰がより多くのPythonまたはJavaScriptを支払われますか? Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

JavaScriptは学ぶのが難しいですか? JavaScriptは学ぶのが難しいですか? Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1)変数、データ型、関数などの基本概念を理解します。2)非同期プログラミングをマスターし、イベントループを通じて実装します。 3)DOM操作を使用し、非同期リクエストを処理することを約束します。 4)一般的な間違いを避け、デバッグテクニックを使用します。 5)パフォーマンスを最適化し、ベストプラクティスに従ってください。

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は?
または:
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は? または: Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト(https://www.shisido.co.co.jp/sb/wonderland/)と同様の達成方法について説明します。

JavaScriptの進化:現在の傾向と将来の見通し JavaScriptの進化:現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

See all articles