Panduan Pembangun untuk Mempercepatkan Pembangunan dengan Mock Service Worker (MSW)

Bab 1: Pengenalan kepada Mock Service Worker (MSW)

Dalam dunia pembangunan web yang pantas, kecekapan dan kelajuan adalah penting. Setiap minit penting apabila anda berusaha untuk memenuhi tarikh akhir, menyampaikan ciri dan memastikan kualiti aplikasi anda. Di sinilah Mock Service Worker (MSW) berperanan—alat berkuasa yang membolehkan pembangun mensimulasikan respons API tanpa bergantung pada bahagian belakang yang berfungsi sepenuhnya.

Dalam ebook ini, kami akan membawa anda mengembara melalui dunia MSW. Anda akan belajar cara menyediakannya, menyepadukannya ke dalam aliran kerja pembangunan anda dan memanfaatkan potensi penuhnya untuk mempercepatkan proses pembangunan anda. Sama ada anda membina aplikasi web yang kompleks atau menguji antara muka pengguna, MSW boleh menjadikan hidup anda sebagai pembangun dengan ketara lebih mudah.

---

Bab 2: Memahami Keperluan untuk API Mengejek

Sebelum kita menyelami butiran MSW, adalah penting untuk memahami mengapa API mengejek adalah penting dalam pembangunan web moden.

2.1 Cabaran Pembangunan Bergantung kepada API

Apabila membangunkan aplikasi bahagian hadapan, anda sering bergantung pada API untuk mengambil data dan melaksanakan operasi. Walau bagaimanapun, API ini mungkin tidak sentiasa bersedia apabila anda bersedia. Kelewatan dalam pembangunan bahagian belakang, masa henti pelayan dan isu rangkaian boleh melambatkan anda. Tanpa akses kepada respons API sebenar, adalah mencabar untuk menguji kod bahagian hadapan anda dengan berkesan.

2.2 Ejekan Tradisional lwn MSW

Secara tradisinya, pembangun telah menggunakan pelbagai kaedah untuk mengejek API, seperti menyediakan pelayan setempat, menggunakan fail data olok-olok atau mencipta fungsi olok-olok tersuai. Walaupun kaedah ini berkesan, kaedah ini boleh menyusahkan, memerlukan penyelenggaraan yang berterusan dan kekurangan fleksibiliti yang diperlukan untuk aplikasi moden.

Di sinilah MSW bersinar. Tidak seperti kaedah tradisional, MSW memintas permintaan rangkaian terus dalam pelayar atau persekitaran Node.js, membolehkan anda mensimulasikan gelagat API dengan persediaan yang minimum. Ia menyediakan pendekatan yang fleksibel dan bersepadu untuk mengejek, menjadikannya lebih mudah untuk mengendalikan kod bahagian hadapan anda secara bebas daripada bahagian belakang.

---

Bab 3: Menyediakan Mock Service Worker (MSW)

Sekarang anda memahami kepentingan mengejek API, mari kita jalani proses menyediakan MSW dalam projek anda.

3.1 Pemasangan

Pertama, anda perlu memasang pakej MSW. Buka terminal anda dan jalankan:

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

3.2 Memulakan MSW

Dengan MSW dipasang, langkah seterusnya adalah untuk memulakannya dalam projek anda.

1. Buat Direktori Olok-olok: Mulakan dengan mencipta direktori olok-olok dalam projek anda. Di dalam direktori ini, anda akan menentukan pengendali permintaan anda.

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

1. Tentukan Pengendali Permintaan: Dalam fail handlers.js, anda akan menentukan cara MSW harus mengendalikan permintaan rangkaian yang berbeza. Sebagai contoh, berikut ialah cara anda boleh mengejek permintaan GET kepada /api/user:

   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',
         })
       );
     }),
   ];

Pengendali ini memintas permintaan dan mengembalikan respons palsu dengan data pengguna.

1. Sediakan Pekerja Perkhidmatan: Sekarang, anda akan menyediakan pekerja perkhidmatan yang akan memintas permintaan rangkaian dan mengembalikan respons palsu.

Dalam src/mocks/browser.js, tambahkan yang berikut:

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

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

3.3 Memulakan MSW

Untuk memulakan MSW, anda perlu menyepadukannya ke dalam pintu masuk projek anda.

1. Ubah suai Fail Penyertaan Anda: Buka index.js atau index.tsx anda dan tambahkan kod berikut:

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

Ini memastikan MSW hanya aktif dalam mod pembangunan, membolehkan anda mengejek API semasa anda membina aplikasi anda.

1. Jalankan Pelayan Pembangunan Anda: Dengan semua yang disediakan, mulakan pelayan pembangunan anda menggunakan npm start atau yarn start. MSW kini akan memintas permintaan API dan mengembalikan respons olok-olok yang ditakrifkan dalam pengendali anda.

---

Bab 4: Memanfaatkan MSW untuk Ujian Cekap

Salah satu ciri MSW yang paling berkuasa ialah keupayaannya untuk mensimulasikan senario API yang berbeza semasa ujian. Ini membolehkan anda menulis ujian komprehensif yang merangkumi pelbagai kes penggunaan tanpa bergantung pada pelayan langsung.

4.1 Menyediakan MSW untuk Pengujian

Untuk menggunakan MSW dalam ujian anda, anda perlu mengkonfigurasinya untuk dijalankan dalam persekitaran ujian anda. Begini cara anda boleh menyediakannya dengan 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.

---

Bab 8: Kesimpulan

Mock Service Worker (MSW) ialah alat yang tidak ternilai untuk pembangun web moden. Ia membolehkan anda mengejek API dengan usaha yang minimum, mempercepatkan proses pembangunan anda dan memastikan persekitaran ujian yang konsisten. Dengan menyepadukan MSW ke dalam aliran kerja anda, anda boleh membina dan menguji aplikasi anda dengan lebih cekap, mengurangkan pergantungan pada perkhidmatan bahagian belakang dan meningkatkan produktiviti keseluruhan anda.

Sama ada anda sedang mengusahakan aplikasi web yang kompleks atau komponen mudah, MSW menyediakan fleksibiliti dan kuasa yang anda perlukan untuk menyampaikan perisian berkualiti tinggi tepat pada masanya. Selamat mengekod!

---

Lampiran: Sumber Tambahan

• Dokumentasi MSW
• Rangka Kerja Pengujian Jenaka
• Buku cerita
• Tindakan GitHub
• Node.js

Atas ialah kandungan terperinci Panduan Pembangun untuk Mempercepatkan Pembangunan dengan Mock Service Worker (MSW). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!