MSWの美しさ

私たちが MSW を愛する理由

昔、新しいプロジェクトを作成しようとしたとき、バックエンドに大きく依存しない可能性を検討しました。私たちのアイデアは、バックエンドの現在の作業のモックを受け取り、並行して処理を進めることでした。このアプローチを使用すると、バックエンドが作業を完了したときに必要なデータを準備できるため、変更を加える必要がなくなります。バックエンドがデプロイされたら、開発サーバーのモックを無効にして実際のエンドポイントに切り替えるだけです。

モックを作成し、後で実際のエンドポイントに置き換えることができるツールはたくさんあると思います。しかし、私たちは素晴らしい解決策、Mock Service Worker (MSW) を見つけました。

MSWとは何ですか？

MSW は、ネットワーク リクエストを傍受して模擬できる強力なツールです。クライアント側とサーバー側の両方で動作するため、非常に多用途です。 MSW を使用すると、API エンドポイントの現実的なモックを作成でき、実際のバックエンドに依存せずにアプリケーションを開発およびテストできるようになります。

MSW を使用する利点

地域開発

MSW は、ローカル開発中にバックエンドへの多数の呼び出しを回避するのに役立ちます。これにより、バックエンド サービスの負荷が軽減され、開発プロセスが高速化されます。以下は、ローカル開発用に MSW をセットアップする方法の例です:

// src/mocks/handlers.js
import { rest } from 'msw';

export const handlers =
  [
    http.get(
      URL,
      ({
        request,
      }) => {
        return HttpResponse.json(
          {
            title:
              'Mock Data',
          },
        );
      },
    ),
  ];

// src/mocks/browser.js
import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker =
  setupWorker(
    ...handlers,
  );

// src/index.js
if (
  process.env
    .NODE_ENV ===
  'development'
) {
  const {
    worker,
  } = require('./mocks/browser');
  worker.start();
}

QAテスト

MSW は、QA チームが実際にバックエンドを呼び出すことなく UI をテストできるようにします。これは、バックエンドが不安定な場合、または大量の開発が行われている場合に特に便利です。 QA エンジニアは、事前定義されたモック データを使用して、フロントエンドが期待どおりに動作することを確認できます。

自動テスト

自動テストの場合、MSW は各通話を手動で傍受する必要を回避します。基本的な構成を使用すると、さまざまなシナリオの応答を模擬できるため、テストの信頼性が向上し、作成が容易になります。以下は、テスト環境での MSW のセットアップの例です:

// src/mocks/server.js
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server =
  setupServer(
    ...handlers,
  );

// src/setupTests.js
import { server } from './mocks/server';

beforeAll(() =>
  server.listen(),
);
afterEach(() =>
  server.resetHandlers(),
);
afterAll(() =>
  server.close(),
);

ハンドラーの処理方法

ハンドラーを個別のファイルにグループ化し、必要に応じて結合することで、ハンドラーを整理できます。例:

// src/mocks/handlers.js
import { userHandlers } from './user';
import { productHandlers } from './product';

export const handlers =
  [
    ...userHandlers,
    ...productHandlers,
  ];

各ハンドラーには、テスト目的で複数のシナリオを含めることができます。シナリオを定義して使用する方法の例を次に示します:

ハンドラーのシナリオ

シナリオは、成功またはエラー状態などのさまざまな条件をシミュレートする、事前定義された一連の応答です。これにより、異なる疑似応答を簡単に切り替えることができます。

// src/mocks/user.js
import { rest } from 'msw';

const USER_URL =
  'http://pii.dev.localhost:3200/api/v1/userV2/current';

const scenarios = {
  success: [
    http.get(
      URL,
      ({
        request,
      }) => {
        return HttpResponse.json(
          {
            title:
              'Mock Data',
          },
        );
      },
    ),
  ],
  error: [
    http.get(
      USER_URL,
      () => {
        return HttpResponse.json(
          {
            error:
              'Unauthorized',
          },
          {
            status: 401,
          },
        );
      },
    ),
  ],
};

const scenarioName =
  new URLSearchParams(
    window.location.search,
  ).get(
    'scenario',
  ) || 'success';
export const userHandlers =
  scenarios[
    scenarioName
  ] || [];

シナリオの説明

シナリオを使用すると、アプリケーションが遭遇する可能性のあるさまざまな条件を簡単にテストできます。 URL のシナリオ クエリ パラメーターを変更することで、コードを変更せずにさまざまな応答をシミュレートできます。

たとえば、成功シナリオをテストするには、次の場所に移動します。

http://yourapp.localhost/?scenario=success

エラー シナリオの場合:

http://yourapp.localhost/?scenario=error

このアプローチにより、異なるモック応答を動的に切り替えることができるため、開発とテストのプロセスがより柔軟かつ効率的になります。

---

MSW を使用することで、開発環境とテスト環境の両方でモック データと API 応答をシームレスに処理できるようになります。これにより、バックエンドの可用性や安定性を心配することなく、機能の開発とテストの作成に集中できます。 MSW を使用すると、自信を持って現実的な模擬シナリオを作成し、実際のバックエンドと統合する前にアプリケーションが正しく動作することを確認できます。

私は MSW がどのように機能するかをまだ発見中です。より良い解決策があれば、お気軽に教えてください。

ベスト プラクティスを確認したい場合は、ドキュメントを参照してください。

以上がMSWの美しさの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。