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

導入

テストは開発プロセスの重要な部分であり、アプリケーションが期待どおりに動作し、長期にわたって堅牢性が維持されることを確認します。 Cypress は、優れた開発者エクスペリエンスを提供し、React などの最新の JavaScript フレームワークとシームレスに統合する、強力なエンドツーエンドのテスト フレームワークです。この投稿では、Cypress を使用して React アプリケーションをセットアップおよびテストする方法を、実践的な例とベスト プラクティスに焦点を当てて説明します。

React テストに Cypress を使用する理由

1. 開発者エクスペリエンス: Cypress は直感的な API、リアルタイムのリロード、対話型のデバッグを提供し、テストの作成と保守を容易にします。
2. 高速かつ信頼性: Cypress はブラウザ内で直接実行され、一貫した結果を伴う高速で信頼性の高いテストを提供します。
3. 強力な機能: Cypress には、タイム トラベル、自動待機、詳細なエラー メッセージなどの組み込み機能が含まれており、テストの品質と生産性を向上させます。
4. シームレスな統合: Cypress は React アプリケーションとシームレスに統合し、コンポーネント、インタラクション、ユーザー フローを効果的にテストできるようにします。

React 用に Cypress をセットアップする

React アプリケーションで Cypress の使用を開始するには、次の手順に従います。

ステップ 1: Cypress をインストールする
まず、Cypress を開発依存関係として React プロジェクトにインストールします。

npm install cypress --save-dev

ステップ 2: Cypress を構成する
以下を実行して Cypress テスト ランナーを開きます:

npx cypress open

これにより、プロジェクト内にデフォルト設定とサンプル テストを含む cypress フォルダーが作成されます。必要に応じて、cypress.json ファイルの構成をカスタマイズできます。
ステップ 3: テスト ファイルを作成する
cypress/e2e ディレクトリ内に、新しいテスト ファイル (react-app.spec.js など) を作成します。このファイルには、React アプリケーションの Cypress テストが含まれます。

React 用の Cypress テストの作成
React アプリケーションの基本的なテストをいくつか書いてみましょう。コンポーネントのレンダリング、インタラクション、アサーションについて説明します。

例: React コンポーネントのテスト
Counter という単純な React コンポーネントがあるとします:

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>Counter: {count}</h1>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            <button onClick={() => setCount(count - 1)}>Decrement</button>
        </div>
    );
};

export default Counter;

Cypress テストを作成して、コンポーネントの動作を検証できます。

describe('Counter Component', () => {
    beforeEach(() => {
        cy.visit('/');
    });

    it('should render the counter with initial value', () => {
        cy.get('h1').contains('Counter: 0');
    });

    it('should increment the counter', () => {
        cy.get('button').contains('Increment').click();
        cy.get('h1').contains('Counter: 1');
    });

    it('should decrement the counter', () => {
        cy.get('button').contains('Increment').click();
        cy.get('button').contains('Decrement').click();
        cy.get('h1').contains('Counter: 0');
    });
});

これらのテストでは:

• cy.visit('/') を使用して、アプリケーションのルート URL に移動します。
• cy.get() を使用して、テキスト コンテンツまたは CSS セレクターによって要素を選択します。
• cy.contains() を使用して、選択した要素に特定のテキストが含まれていることを確認します。
• ボタンのクリックをシミュレートし、インタラクションをトリガーするには、cy.click() を使用します。

高度なテストのシナリオ

フォーム入力のテスト
ユーザー名とパスワードを入力するログイン フォームがあるとします。テスト方法は次のとおりです:

describe('Login Form', () => {
    beforeEach(() => {
        cy.visit('/login');
    });

    it('should allow a user to type in the username and password', () => {
        cy.get('input[name="username"]').type('testuser');
        cy.get('input[name="password"]').type('password123');
    });

    it('should show an error message for invalid credentials', () => {
        cy.get('input[name="username"]').type('invaliduser');
        cy.get('input[name="password"]').type('wrongpassword');
        cy.get('button[type="submit"]').click();
        cy.get('.error-message').should('be.visible').and('contain', 'Invalid credentials');
    });

    it('should redirect to dashboard on successful login', () => {
        cy.get('input[name="username"]').type('testuser');
        cy.get('input[name="password"]').type('password123');
        cy.get('button[type="submit"]').click();
        cy.url().should('include', '/dashboard');
    });
});

API リクエストのモック
Cypress を使用して API リクエストをインターセプトおよびモックし、バックエンドに依存せずにさまざまなシナリオをテストできます。

describe('API Mocking', () => {
    beforeEach(() => {
        cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fakeToken' } }).as('loginRequest');
        cy.visit('/login');
    });

    it('should mock a successful login', () => {
        cy.get('input[name="username"]').type('testuser');
        cy.get('input[name="password"]').type('password123');
        cy.get('button[type="submit"]').click();
        cy.wait('@loginRequest').its('response.statusCode').should('eq', 200);
        cy.url().should('include', '/dashboard');
    });
});

Cypress を使用して React アプリケーションをテストするためのベスト プラクティス

1. テストを分離する: 副作用を回避し、信頼性を確保するためにテストを独立させます。
2. フィクスチャを使用する: テスト データをフィクスチャに保存して、テストをクリーンで保守しやすい状態に保ちます。
3. カスタム コマンドの活用: カスタム Cypress コマンドを作成して、再利用可能なテスト ロジックをカプセル化します。
4. CI/CD でテストを実行する: Cypress テストを CI/CD パイプラインに統合して、問題を早期に発見します。
5. アクセシビリティのテスト: アプリケーションがアクセス可能であることを確認するために、cypress-axe などのツールを使用したアクセシビリティ テストを含めます。

結論

Cypress は、React アプリケーションをテストするための堅牢で開発者に優しい方法を提供します。このガイドで概説されている手順と例に従うことで、React プロジェクトで Cypress をセットアップし、効果的なエンドツーエンド テストを作成できます。 Cypress の強力な機能とベスト プラクティスを活用することで、信頼性が高く保守しやすい高品質のテストを作成し、React アプリケーションが期待どおりに動作するようにすることができます。

テストをお楽しみください!

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