使用 Mock Service Worker (MSW) 加速開發的開發人員指南-js教程-PHP中文網

The Developer’s Guide to Speeding Up Development with Mock Service Worker (MSW)

第 1 章：Mock Service Worker (MSW) 簡介

在快節奏的 Web 開發世界中，效率和速度至關重要。當您努力按時完成、交付功能並確保應用程式品質時，每一分鐘都很重要。這就是 Mock Service Worker (MSW) 發揮作用的地方 - 一個強大的工具，允許開發人員在不依賴功能齊全的後端的情況下模擬 API 回應。

在這本電子書中，我們將帶您踏上城市固體廢棄物的世界之旅。您將學習如何設定它、將其整合到您的開發工作流程中，並充分利用其潛力來加快您的開發流程。無論您是建立複雜的 Web 應用程式還是測試使用者介面，MSW 都可以讓您作為開發人員的生活變得更加輕鬆。

第 2 章：了解模擬 API 的需求

在我們深入了解 MSW 的細節之前，了解為什麼模擬 API 在現代 Web 開發中至關重要。

2.1 依賴API開發的挑戰

在開發前端應用程式時，您經常依賴 API 來取得資料並執行操作。然而，當您準備好時，這些 API 可能並不總是準備好。後端開發的延遲、伺服器停機和網路問題可能會減慢您的速度。如果無法存取真實的 API 回應，就很難有效地測試您的前端程式碼。

2.2 傳統 Mocking 與 MSW

傳統上，開發人員使用各種方法來模擬 API，例如設定本機伺服器、使用模擬資料檔案或建立自訂模擬函數。雖然這些方法有效，但它們可能很麻煩，需要不斷維護，並且缺乏現代應用程式所需的靈活性。

這就是都市固體廢棄物的閃光點。與傳統方法不同，MSW 直接在瀏覽器或 Node.js 環境中攔截網路請求，讓您可以透過最少的設定來模擬 API 行為。它提供了一種靈活、整合的模擬方法，使您可以更輕鬆地獨立於後端處理前端程式碼。

第 3 章：設定 Mock Service Worker (MSW)

現在您已經了解了模擬 API 的重要性，讓我們來看看在您的專案中設定 MSW 的過程。

3.1 安裝

首先，您需要安裝 MSW 軟體包。開啟終端機並運作：

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

登入後複製

3.2 初始化MSW

安裝 MSW 後，下一步是在您的專案中對其進行初始化。

建立 Mocks 目錄：首先在專案中建立一個模擬目錄。在此目錄中，您將定義請求處理程序。

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

登入後複製

定義請求處理程序：在 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',
         })
       );
     }),
   ];

登入後複製

此處理程序會攔截請求並傳回帶有使用者資料的模擬回應。

設定 Service Worker：現在，您將設定服務工作線程來攔截網路請求並返回模擬回應。

在 src/mocks/browser.js 中，加入以下內容：

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

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

登入後複製

3.3 啟動城市生活垃圾

要啟動 MSW，您需要將其整合到專案的入口點中。

修改您的條目檔案：打開你的index.js或index.tsx並加入以下程式碼：

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

登入後複製

這確保了 MSW 僅在開發模式下處於活動狀態，讓您在建立應用程式時模擬 API。

運行您的開發伺服器：一切設定完畢後，使用 npm start 或yarn start 啟動開發伺服器。 MSW 現在將攔截 API 請求並傳回處理程序中定義的模擬回應。

第 4 章：利用 MSW 進行高效率測試

MSW 最強大的功能之一是它能夠在測試過程中模擬不同的 API 場景。這使您可以編寫涵蓋廣泛用例的全面測試，而無需依賴即時伺服器。

4.1 設定 MSW 進行測試

要在測試中使用 MSW，您需要將其配置為在測試環境中執行。以下是使用 Jest 進行設定的方法：

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);

登入後複製

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.

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();

登入後複製

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.

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.

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.