モック サービス ワーカー (MSW) を使用して開発を高速化するための開発者ガイド

第 1 章: モック サービス ワーカー (MSW) の概要

ペースの速い Web 開発の世界では、効率とスピードが非常に重要です。期限を守り、機能を提供し、アプリケーションの品質を確保するためには、一分一秒が勝負です。ここで Mock Service Worker (MSW) が登場します。これは、開発者が完全に機能するバックエンドに依存せずに API 応答をシミュレートできる強力なツールです。

この電子ブックでは、MSW の世界を巡る旅にご案内します。これを設定し、開発ワークフローに統合し、その可能性を最大限に活用して開発プロセスをスピードアップする方法を学びます。複雑な Web アプリケーションを構築している場合でも、ユーザー インターフェイスをテストしている場合でも、MSW を使用すると開発者としての作業が大幅に楽になります。

---

第 2 章: モック API の必要性を理解する

MSW の詳細に入る前に、最新の Web 開発において API のモックが不可欠である理由を理解することが重要です。

2.1 API に依存した開発の課題

フロントエンド アプリケーションを開発する場合、データを取得して操作を実行するために API に依存することがよくあります。ただし、これらの API は、いつでも利用できるとは限りません。バックエンド開発の遅延、サーバーのダウンタイム、ネットワークの問題により、作業の速度が低下する可能性があります。実際の API レスポンスにアクセスできないと、フロントエンド コードを効果的にテストするのは困難です。

2.2 従来のモッキングと MSW

従来、開発者は、ローカル サーバーのセットアップ、モック データ ファイルの使用、カスタム モック関数の作成など、さまざまな方法を使用して API をモックしてきました。これらの方法は機能しますが、煩雑で定期的なメンテナンスが必要であり、最新のアプリケーションに必要な柔軟性に欠ける可能性があります。

ここで MSW が輝きます。従来の方法とは異なり、MSW はブラウザまたは Node.js 環境でネットワーク リクエストを直接インターセプトするため、最小限のセットアップで API の動作をシミュレートできます。これにより、モックに対する柔軟で統合されたアプローチが提供され、バックエンドから独立してフロントエンド コードを簡単に操作できるようになります。

---

第 3 章: モック Service Worker (MSW) のセットアップ

API のモック化の重要性を理解したところで、プロジェクトで MSW を設定するプロセスを見てみましょう。

3.1 インストール

まず、MSW パッケージをインストールする必要があります。ターミナルを開いて次を実行します:

npm install msw --save-dev
# or
yarn add msw --dev

3.2 MSWの初期化

MSW がインストールされたら、次のステップはプロジェクト内で MSW を初期化することです。

1. モックディレクトリを作成します: まず、プロジェクト内にモック ディレクトリを作成します。このディレクトリ内でリクエスト ハンドラーを定義します。

   mkdir src/mocks
   touch src/mocks/handlers.js

1. リクエストハンドラーを定義: handlers.js ファイルでは、MSW がさまざまなネットワーク リクエストを処理する方法を定義します。たとえば、/api/user への GET リクエストをモックする方法は次のとおりです。

   import { rest } from 'msw';

   export const handlers = [
     rest.get('/api/user', (req, res, ctx) => {
       return res(
         ctx.status(200),
         ctx.json({
           username: 'john_doe',
           email: 'john@example.com',
         })
       );
     }),
   ];

このハンドラーはリクエストをインターセプトし、ユーザー データを含む模擬応答を返します。

1. Service Worker をセットアップする: ここで、ネットワーク リクエストをインターセプトし、模擬応答を返す Service Worker を設定します。

src/mocks/browser.js に次の内容を追加します。

   import { setupWorker } from 'msw';
   import { handlers } from './handlers';

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

3.3 MSWの起動

MSW を開始するには、MSW をプロジェクトのエントリ ポイントに統合する必要があります。

1. エントリ ファイルを変更します: Index.js または Index.tsx を開き、次のコードを追加します。

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

これにより、MSW は開発モードでのみアクティブになり、アプリケーションの構築中に API をモックできるようになります。

1. 開発サーバーを実行します: すべての設定が完了したら、npm start または Yarn start を使用して開発サーバーを起動します。 MSW は API リクエストをインターセプトし、ハンドラーで定義されたモック レスポンスを返します。

---

第 4 章: 効率的なテストのための MSW の活用

MSW の最も強力な機能の 1 つは、テスト中にさまざまな API シナリオをシミュレートできる機能です。これにより、ライブサーバーに依存せずに、幅広いユースケースをカバーする包括的なテストを作成できます。

4.1 テスト用の MSW のセットアップ

テストで MSW を使用するには、テスト環境で実行できるように MSW を構成する必要があります。 Jest で設定する方法は次のとおりです:

1. Create a Test Server: In src/mocks/server.js, set up a test server:

   import { setupServer } from 'msw/node';
   import { handlers } from './handlers';

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

1. Configure Jest: Create a setupTests.js file in your project root (if you don’t have one already) and add the following code:

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

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

This configures MSW to start the mock server before your tests run, reset the handlers after each test, and close the server when the tests are done.

4.2 Writing Tests with MSW

With MSW set up, you can write tests that simulate various API responses. For example, let’s test a component that fetches and displays user data:

import { render, screen, waitFor } from '@testing-library/react';
import UserProfile from './UserProfile';

test('displays user data', async () => {
  render(<UserProfile />);

  expect(await screen.findByText('john_doe')).toBeInTheDocument();
  expect(screen.getByText('john@example.com')).toBeInTheDocument();
});

In this test, MSW intercepts the network request made by the UserProfile component and returns the mock user data defined in your handler.

---

Chapter 5: Advanced Features of MSW

MSW isn’t just for simple mocking—it offers advanced features that allow you to fine-tune how your application interacts with APIs.

5.1 Conditional Request Handlers

MSW allows you to conditionally modify responses based on request parameters, headers, or even the request body. This is useful for simulating different scenarios, such as authentication errors or validation failures.

rest.post('/api/login', (req, res, ctx) => {
  const { username } = req.body;

  if (username === 'invalid_user') {
    return res(
      ctx.status(403),
      ctx.json({ error: 'Invalid username or password' })
    );
  }

  return res(
    ctx.status(200),
    ctx.json({ token: 'fake-jwt-token' })
  );
});

In this example, if the username is invalid_user, the response will simulate a login failure.

5.2 Simulating Delays and Errors

To test how your application handles slow or failed requests, MSW allows you to introduce delays or return error responses.

rest.get('/api/data', (req, res, ctx) => {
  return res(
    ctx.status(500),
    ctx.delay(1000),  // Introduce a 1-second delay
    ctx.json({ error: 'Internal Server Error' })
  );
});

This handler simulates a slow network and an internal server error, allowing you to ensure your application responds appropriately.

---

Chapter 6: Integrating MSW into Your Development Workflow

MSW can be seamlessly integrated into various parts of your development workflow, from development to testing and even continuous integration.

6.1 Using MSW with Storybook

Storybook is a popular tool for building and testing UI components in isolation. By integrating MSW with Storybook, you can mock APIs directly within your stories, allowing you to develop and test components without relying on real backend data.

1. Set Up MSW in Storybook: In your Storybook configuration file (.storybook/preview.js), start the MSW worker:

   import { worker } from '../src/mocks/browser';

   worker.start();

1. Mock API Calls in Stories: Now, when you load your components in Storybook, MSW will intercept any network requests and return the mock responses, just as it does in your main application.

6.2 Leveraging MSW in CI/CD Pipelines

By integrating MSW into your continuous integration and deployment (CI/CD) pipelines, you can ensure consistent testing environments, regardless of the availability or state of your backend services.

1. Include MSW in Test Scripts:
   In your CI/CD configuration (e.g., in a GitHub Actions workflow or Jenkins pipeline), ensure that MSW is started before your tests run. This guarantees that all network requests during the tests are properly mocked.

2. Simulate Various Environments:
   Use MSW to simulate different API environments (e.g., staging, production

) by adjusting your request handlers based on environment variables. This allows you to test your application under various conditions without needing access to those environments.

---

Chapter 7: Best Practices and Common Pitfalls

As with any tool, there are best practices to follow and common pitfalls to avoid when using MSW.

7.1 Keep Handlers Organized

As your application grows, the number of request handlers can become unwieldy. Keep your handlers organized by grouping them into different files based on feature or module.

// src/mocks/handlers/user.js
export const userHandlers = [
  rest.get('/api/user', (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ username: 'john_doe' }));
  }),
];

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

export const handlers = [...userHandlers];

7.2 Avoid Over-Mocking

While it’s tempting to mock every API request, be mindful not to overdo it. Excessive mocking can lead to tests that don’t accurately reflect real-world conditions. Strike a balance between mocking for efficiency and ensuring your application is tested against actual APIs when necessary.

7.3 Regularly Update Mock Data

Keep your mock data up-to-date with the real API responses. This ensures that your tests and development environment remain accurate and relevant as the backend evolves.

---

第 8 章: 結論

Mock Service Worker (MSW) は、現代の Web 開発者にとって非常に貴重なツールです。これにより、最小限の労力で API をモックできるため、開発プロセスが高速化され、一貫したテスト環境が確保されます。 MSW をワークフローに統合することで、アプリケーションの構築とテストをより効率的に行うことができ、バックエンド サービスへの依存を減らし、全体的な生産性を向上させることができます。

複雑な Web アプリケーションで作業している場合でも、単純なコンポーネントで作業している場合でも、MSW は高品質のソフトウェアを予定どおりに提供するために必要な柔軟性とパワーを提供します。コーディングを楽しんでください!

---

付録: 追加リソース

• MSW ドキュメント
• Jest テスト フレームワーク
• ストーリーブック
• GitHub アクション
• Node.js

以上がモック サービス ワーカー (MSW) を使用して開発を高速化するための開発者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。