導入

エンドツーエンドのテストに関しては、外部依存関係を制御することでテストの信頼性と速度を大幅に向上させることができます。最新の Web テスト フレームワークである Cypress は、HTTP リクエストをモックおよびスタブするための強力な機能を提供し、実際のバックエンド サービスに依存せずにさまざまなシナリオをシミュレートできます。この投稿では、Cypress の cy.intercept() を利用して API 呼び出しをモックおよびスタブ化し、テストをより堅牢かつ効率的にする方法を検討します。

なぜモッキングとスタブを行うのか?

Cypress での HTTP リクエストのモックとスタブには、いくつかの利点があります。

1. 分離: フロントエンドをバックエンドから独立してテストし、テストがバックエンドの変更や停止の影響を受けないようにします。
2. 速度: 実際のネットワーク呼び出しを回避することで、テストの実行時間を短縮します。
3. 信頼性: さまざまな応答やエッジケースをシミュレートすることで、予測可能で一貫したテスト条件を作成します。
4. 柔軟性: バックエンドを変更することなく、エラー、遅い応答、さまざまなデータ ペイロードなどのさまざまなシナリオをテストします。

サイプレスのセットアップ

Cypress をまだインストールしていない場合は、次のコマンドを使用してセットアップできます:

npm install cypress --save-dev
npx cypress open

続行する前に、基本的な Cypress プロジェクト構造が準備されていることを確認してください。

cy.intercept() の使用

Cypress の cy.intercept() コマンドを使用すると、ネットワークのリクエストと応答をインターセプトして変更できます。これは非推奨の cy.route() コマンドを置き換え、より高い柔軟性と機能を提供します。

基本的な例
API 応答を模擬する基本的な例から始めましょう:

// cypress/integration/mock_basic.spec.js
describe('Mocking API Responses', () => {
  it('should display mocked data', () => {
    cy.intercept('GET', '/api/todos', {
      statusCode: 200,
      body: [
        { id: 1, title: 'Mocked Todo 1', completed: false },
        { id: 2, title: 'Mocked Todo 2', completed: true }
      ]
    }).as('getTodos');

    cy.visit('/todos');
    cy.wait('@getTodos');

    cy.get('.todo').should('have.length', 2);
    cy.get('.todo').first().should('contain.text', 'Mocked Todo 1');
  });
});

この例では、/api/todos への GET リクエストをインターセプトし、模擬応答を提供します。 as('getTodos') は、インターセプトされたリクエストにエイリアスを割り当て、テストでの参照を容易にします。

高度なモッキング シナリオ

エラーのシミュレーション
さまざまな HTTP エラー ステータスをシミュレートして、アプリケーションがそれらをどのように処理するかをテストできます:

// cypress/integration/mock_errors.spec.js
describe('Simulating API Errors', () => {
  it('should display error message on 500 response', () => {
    cy.intercept('GET', '/api/todos', {
      statusCode: 500,
      body: { error: 'Internal Server Error' }
    }).as('getTodosError');

    cy.visit('/todos');
    cy.wait('@getTodosError');

    cy.get('.error-message').should('contain.text', 'Failed to load todos');
  });
});

応答が遅れています
アプリケーションが遅いネットワーク応答をどのように処理するかをテストするには、遅延を導入できます:

// cypress/integration/mock_delays.spec.js
describe('Simulating Slow Responses', () => {
  it('should display loading indicator during slow response', () => {
    cy.intercept('GET', '/api/todos', (req) => {
      req.reply((res) => {
        res.delay(2000); // 2-second delay
        res.send({ body: [] });
      });
    }).as('getTodosSlow');

    cy.visit('/todos');
    cy.get('.loading').should('be.visible');
    cy.wait('@getTodosSlow');
    cy.get('.loading').should('not.exist');
  });
});

特定のシナリオのモック化

条件付きモック
リクエストの本文またはヘッダーに基づいて、条件付きで応答をモックできます:

// cypress/integration/mock_conditional.spec.js
describe('Conditional Mocking', () => {
  it('should mock response based on request body', () => {
    cy.intercept('POST', '/api/todos', (req) => {
      if (req.body.title === 'Special Todo') {
        req.reply({
          statusCode: 201,
          body: { id: 999, title: 'Special Todo', completed: false }
        });
      }
    }).as('createTodo');

    cy.visit('/todos');
    cy.get('input[name="title"]').type('Special Todo');
    cy.get('button[type="submit"]').click();

    cy.wait('@createTodo');
    cy.get('.todo').should('contain.text', 'Special Todo');
  });
});

モックとスタブのベスト プラクティス

1. エイリアスの使用: .as() を使用して、インターセプトされたリクエストに常にエイリアスを割り当てます。これにより、テストが読みやすくなり、デバッグが容易になります。
2. フィクスチャと組み合わせる: メンテナンス性と読みやすさを向上させるために、大規模なモック データをフィクスチャ ファイルに保存します。 cy.fixture() を使用してフィクスチャをロードします。
3. 過剰なモックを避ける: テストに必要なもののみをモックします。過度に嘲笑すると、現実世界のシナリオを反映しないテストが行​​われる可能性があります。
4. 実際の API 呼び出しのテスト: 実際のバックエンドに対して定期的にテストして、アプリケーションが実際のデータで正しく動作することを確認します。

結論

Cypress のモックとスタブは、テストをより高速に、より信頼性が高く、保守を容易にする強力なテクニックです。 HTTP リクエストをインターセプトし、カスタム応答を提供することで、外部サービスに依存せずに幅広いテスト シナリオを作成できます。このガイドで提供されているベスト プラクティスと例に従って、Cypress テストでのモックとスタブをマスターしてください。

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