Vitest を使用した React アプリケーションのテスト: 包括的なガイド
テストは最新のソフトウェア開発の重要な側面であり、コードが期待どおりに動作することを確認し、アプリケーションの進化に伴う回帰を防ぎます。 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 サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











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

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

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

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

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

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

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

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