城市固体废弃物的美丽

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

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

我确信存在许多工具可以让您创建模拟并稍后用真实端点替换它们。然而，我们找到了一个很好的解决方案：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
  ] || [];

场景说明

场景允许您轻松测试应用程序可能遇到的不同条件。通过更改URL中的场景查询参数，您可以在不更改代码的情况下模拟不同的响应。

例如，要测试成功场景，您可以导航至：

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

对于错误场景：

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

这种方法允许您在不同的模拟响应之间动态切换，使您的开发和测试过程更加灵活和高效。

---

通过使用 MSW，我们可以在开发和测试环境中以无缝方式处理模拟数据和 API 响应。它使我们能够专注于开发功能和编写测试，而无需担心后端的可用性或稳定性。借助 MSW，我们可以自信地创建真实的模拟场景，并确保我们的应用程序在与真实后端集成之前正常工作。

我仍在探索城市固体废弃物的运作方式。如果您有更好的解决方案，欢迎告诉我。

如果您想查看最佳实践，请随时查看文档。

以上是城市固体废弃物的美丽的详细内容。更多信息请关注PHP中文网其他相关文章！