私たちが MSW を愛する理由

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

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

MSWとは何ですか？

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

MSW を使用する利點(diǎn)

地域開発

MSW は、ローカル開発中にバックエンドへの多數(shù)の呼び出しを回避するのに役立ちます。これにより、バックエンド サービスの負(fù)荷が軽減され、開発プロセスが高速化されます。以下は、ローカル開発用に 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 エンジニアは、事前定義されたモック データを使用して、フロントエンドが期待どおりに動作することを確認(rèn)できます。

自動テスト

自動テストの場合、MSW は各通話を手動で傍受する必要を回避します?；镜膜蕵?gòu)成を使用すると、さまざまなシナリオの応答を模擬できるため、テストの信頼性が向上し、作成が容易になります。以下は、テスト環(huán)境での 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(),
);

ハンドラーの処理方法

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

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

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

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

ハンドラーのシナリオ

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

// 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 を使用することで、開発環(huán)境とテスト環(huán)境の両方でモック データと API 応答をシームレスに処理できるようになります。これにより、バックエンドの可用性や安定性を心配することなく、機(jī)能の開発とテストの作成に集中できます。 MSW を使用すると、自信を持って現(xiàn)実的な模擬シナリオを作成し、実際のバックエンドと統(tǒng)合する前にアプリケーションが正しく動作することを確認(rèn)できます。

私は MSW がどのように機(jī)能するかをまだ発見中です。より良い解決策があれば、お?dú)葺Xに教えてください。

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

以上がMSWの美しさの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。