ペースの速い Web 開発の世界では、効率とスピードが非常に重要です。期限を守り、機能を提供し、アプリケーションの品質を確保するためには、一分一秒が勝負です。ここで Mock Service Worker (MSW) が登場します。これは、開発者が完全に機能するバックエンドに依存せずに API 応答をシミュレートできる強力なツールです。
この電子ブックでは、MSW の世界を巡る旅にご案内します。これを設定し、開発ワークフローに統合し、その可能性を最大限に活用して開発プロセスをスピードアップする方法を学びます。複雑な Web アプリケーションを構築している場合でも、ユーザー インターフェイスをテストしている場合でも、MSW を使用すると開発者としての作業が大幅に楽になります。
MSW の詳細に入る前に、最新の Web 開発において API のモックが不可欠である理由を理解することが重要です。
フロントエンド アプリケーションを開発する場合、データを取得して操作を実行するために API に依存することがよくあります。ただし、これらの API は、いつでも利用できるとは限りません。バックエンド開発の遅延、サーバーのダウンタイム、ネットワークの問題により、作業の速度が低下する可能性があります。実際の API レスポンスにアクセスできないと、フロントエンド コードを効果的にテストするのは困難です。
従来、開発者は、ローカル サーバーのセットアップ、モック データ ファイルの使用、カスタム モック関数の作成など、さまざまな方法を使用して API をモックしてきました。これらの方法は機能しますが、煩雑で定期的なメンテナンスが必要であり、最新のアプリケーションに必要な柔軟性に欠ける可能性があります。
ここで MSW が輝きます。従来の方法とは異なり、MSW はブラウザまたは Node.js 環境でネットワーク リクエストを直接インターセプトするため、最小限のセットアップで API の動作をシミュレートできます。これにより、モックに対する柔軟で統合されたアプローチが提供され、バックエンドから独立してフロントエンド コードを簡単に操作できるようになります。
API のモック化の重要性を理解したところで、プロジェクトで MSW を設定するプロセスを見てみましょう。
まず、MSW パッケージをインストールする必要があります。ターミナルを開いて次を実行します:
npm install msw --save-dev # or yarn add msw --dev
MSW がインストールされたら、次のステップはプロジェクト内で MSW を初期化することです。
mkdir src/mocks touch src/mocks/handlers.js
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',
})
);
}),
];
このハンドラーはリクエストをインターセプトし、ユーザー データを含む模擬応答を返します。
src/mocks/browser.js に次の内容を追加します。
import { setupWorker } from 'msw';
import { handlers } from './handlers';
export const worker = setupWorker(...handlers);
MSW を開始するには、MSW をプロジェクトのエントリ ポイントに統合する必要があります。
if (process.env.NODE_ENV === 'development') {
const { worker } = require('./mocks/browser');
worker.start();
}
これにより、MSW は開発モードでのみアクティブになり、アプリケーションの構築中に API をモックできるようになります。
MSW の最も強力な機能の 1 つは、テスト中にさまざまな API シナリオをシミュレートできる機能です。これにより、ライブサーバーに依存せずに、幅広いユースケースをカバーする包括的なテストを作成できます。
テストで MSW を使用するには、テスト環境で実行できるように MSW を構成する必要があります。 Jest で設定する方法は次のとおりです:
import { setupServer } from 'msw/node';
import { handlers } from './handlers';
export const server = setupServer(...handlers);
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.
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.
MSW isn’t just for simple mocking—it offers advanced features that allow you to fine-tune how your application interacts with APIs.
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.
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.
MSW can be seamlessly integrated into various parts of your development workflow, from development to testing and even continuous integration.
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.
import { worker } from '../src/mocks/browser';
worker.start();
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.
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.
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.
As with any tool, there are best practices to follow and common pitfalls to avoid when using MSW.
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];
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.
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.
Mock Service Worker (MSW) は、現代の Web 開発者にとって非常に貴重なツールです。これにより、最小限の労力で API をモックできるため、開発プロセスが高速化され、一貫したテスト環境が確保されます。 MSW をワークフローに統合することで、アプリケーションの構築とテストをより効率的に行うことができ、バックエンド サービスへの依存を減らし、全体的な生産性を向上させることができます。
複雑な Web アプリケーションで作業している場合でも、単純なコンポーネントで作業している場合でも、MSW は高品質のソフトウェアを予定どおりに提供するために必要な柔軟性とパワーを提供します。コーディングを楽しんでください!
以上がモック サービス ワーカー (MSW) を使用して開発を高速化するための開発者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
