Keindahan MSW

Mengapa Kami Suka MSW

Dulu, semasa kami cuba mencipta projek baharu, kami mempertimbangkan kemungkinan untuk tidak terlalu bergantung pada bahagian belakang. Idea kami adalah untuk menerima ejekan untuk kerja semasa bahagian belakang dan kemudian meneruskan secara selari. Pendekatan ini akan membolehkan kami menyediakan data yang diperlukan apabila bahagian belakang menyelesaikan kerjanya, jadi kami tidak perlu membuat sebarang perubahan. Setelah bahagian belakang digunakan, kami hanya boleh melumpuhkan olok-olok dalam pelayan pembangunan dan beralih ke titik akhir sebenar.

Saya pasti banyak alatan wujud yang membolehkan anda membuat olok-olok dan menggantikannya kemudian dengan titik akhir sebenar. Walau bagaimanapun, kami menemui penyelesaian yang hebat: Mock Service Worker (MSW).

Apakah MSW?

MSW ialah alat berkuasa yang membolehkan anda memintas dan mengejek permintaan rangkaian. Ia berfungsi pada kedua-dua bahagian klien dan pelayan, menjadikannya sangat serba boleh. Dengan MSW, anda boleh mencipta olok-olok realistik untuk titik akhir API anda, membolehkan anda membangunkan dan menguji aplikasi anda tanpa bergantung pada bahagian belakang sebenar.

Faedah Menggunakan MSW

Pembangunan Tempatan

MSW membantu mengelak daripada membuat banyak panggilan ke bahagian belakang semasa pembangunan tempatan. Ini mengurangkan beban pada perkhidmatan bahagian belakang dan mempercepatkan proses pembangunan. Berikut ialah contoh cara anda boleh menyediakan MSW untuk pembangunan tempatan:

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

Ujian QA

MSW membantu pasukan QA menguji UI tanpa membuat panggilan sebenar ke bahagian belakang. Ini amat berguna apabila bahagian belakang tidak stabil atau dalam pembangunan yang berat. Jurutera QA boleh bekerja dengan data olok-olok yang dipratentukan, memastikan bahagian hadapan berfungsi seperti yang diharapkan.

Ujian Automatik

Untuk ujian automatik, MSW mengelakkan keperluan untuk memintas setiap panggilan secara manual. Dengan konfigurasi asas, anda boleh mengejek respons untuk pelbagai senario, menjadikan ujian anda lebih dipercayai dan lebih mudah untuk ditulis. Berikut ialah contoh menyediakan MSW dalam persekitaran ujian:

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

Cara Mengendalikan Pengendali

Anda boleh menyusun pengendali anda dengan mengumpulkannya ke dalam fail yang berasingan dan menggabungkannya mengikut keperluan. Contohnya:

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

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

Setiap pengendali boleh mempunyai berbilang senario untuk tujuan ujian. Berikut ialah contoh cara mentakrif dan menggunakan senario:

Senario dalam Pengendali

Senario ialah set respons yang dipratentukan yang mensimulasikan keadaan berbeza, seperti keadaan kejayaan atau ralat. Ini membolehkan anda bertukar dengan mudah antara respons olok-olok yang berbeza.

// 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
  ] || [];

Penjelasan Senario

Senario membolehkan anda menguji keadaan berbeza yang mungkin dihadapi oleh aplikasi anda dengan mudah. Dengan menukar parameter pertanyaan senario dalam URL, anda boleh mensimulasikan respons yang berbeza tanpa menukar kod.

Sebagai contoh, untuk menguji senario kejayaan, anda akan menavigasi ke:

http://yourapp.localhost/?scenario=success

Dan untuk senario ralat:

http://yourapp.localhost/?scenario=error

Pendekatan ini membolehkan anda bertukar secara dinamik antara respons olok-olok yang berbeza, menjadikan proses pembangunan dan ujian anda lebih fleksibel dan cekap.

Dengan menggunakan MSW, kami mempunyai cara yang lancar untuk mengendalikan data olok-olok dan tindak balas API dalam persekitaran pembangunan dan ujian. Ia membolehkan kami menumpukan pada membangunkan ciri dan ujian menulis tanpa perlu risau tentang ketersediaan atau kestabilan bahagian belakang. Dengan MSW, kami yakin boleh mencipta senario olok-olok yang realistik dan memastikan aplikasi kami berfungsi dengan betul sebelum disepadukan dengan bahagian belakang sebenar.

Saya masih menemui cara MSW berfungsi. Jika anda mempunyai sebarang penyelesaian yang lebih baik, sila beritahu saya.

Jika anda ingin menyemak amalan terbaik, sila semak dokumentasi.

Atas ialah kandungan terperinci Keindahan MSW. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!