城市固体废弃物的美丽-js教程-PHP中文网

城市固体废弃物的美丽

Linda Hamilton

发布： 2024-10-18 12:45:30

原创

608 人浏览过

The beauty of MSW

为什么我们喜欢城市固体废弃物

当年，当我们尝试创建一个新项目时，我们考虑了不严重依赖后端的可能性。我们的想法是接收后端当前工作的模拟，然后并行进行。这种方法允许我们在后端完成其工作时准备好必要的数据，因此我们不需要进行任何更改。部署后端后，我们可以简单地禁用开发服务器中的模拟并切换到真实端点。

我确信存在许多工具可以让您创建模拟并稍后用真实端点替换它们。然而，我们找到了一个很好的解决方案：Mock Service Worker (MSW)。

什么是城市固体废物？

MSW 是一个强大的工具，允许您拦截和模拟网络请求。它既可以在客户端也可以在服务器端运行，因此具有令人难以置信的多功能性。借助 MSW，您可以为 API 端点创建真实的模拟，使您能够在不依赖实际后端的情况下开发和测试应用程序。

使用城市固体废弃物的好处

本地发展

MSW 有助于避免在本地开发期间对后端进行大量调用。这减少了后端服务的负载并加快了开发过程。以下是如何设置城市固体废物进行本地开发的示例：

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

登录后复制

质量保证测试

MSW 帮助 QA 团队测试 UI，而无需实际调用后端。当后端不稳定或正在大量开发时，这尤其有用。 QA 工程师可以使用预定义的模拟数据，确保前端按预期工作。

自动化测试

对于自动化测试，MSW 避免了手动拦截每个调用的需要。通过基本配置，您可以模拟各种场景的响应，使您的测试更可靠且更易于编写。以下是在测试环境中设置 MSW 的示例：

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

登录后复制

如何处理处理程序

您可以通过将处理程序分组到单独的文件中并根据需要组合它们来组织处理程序。例如：

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

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

登录后复制

每个处理程序可以有多个场景用于测试目的。以下是如何定义和使用场景的示例：

处理程序中的场景

场景是模拟不同条件（例如成功或错误状态）的一组预定义响应。这使您可以轻松地在不同的模拟响应之间切换。

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

登录后复制