不使用Cypress的MSW运行时请求处理程序(NextJ，Cypress，MSW)

Question

我正在使用NextJ与柏树和垃圾。我想使用Cypress中的MSW工作人员来灵活地模拟我的api请求的响应，以便为所有类型的测试提供一个通用的模拟工具。

工作者设置中的MSW处理程序(在NextJs中)正在拦截来自Cypress测试运行的请求，没有任何问题。但是，当我在Cypress中定义运行时请求处理程序以覆盖现有处理程序或添加特定于测试的处理程序时，api请求不会被截获。

以下是相关档案：

./test/server/testWorker.ts

import { graphql, setupWorker } from "msw";
import { handlers } from "./serverHandlers";

const worker = setupWorker(...handlers);

window.msw = {
  worker,
  graphql,
};

export * from "msw";
export { worker };

./test/server/index.ts

async function initMocks() {
  if (typeof window !== "undefined") {
    const { worker } = await import("./testWorker");
    worker.start();
  }
}

initMocks();

export {};

./_app.tsx

...
if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") {
  require("../test/server");
}

function MyApp({....
...

./柏树/e2e/test.cy.ts

describe("test", () => {
  const data = buildTestData();
  beforeEach(() => {
    cy.visit("/");
    cy.window().then((window) => {
      const { worker, graphql } = window.msw;
// This runtime request handler does not work
      worker.use(
        graphql
          .link("https://example/graphql.json")
          .query(/fetchdata/i, (req, res, ctx) => {
            return res(
              ctx.data({
                data
              })
            );
          })
      );
    });
  });
...

worker.printHandlers()命令显示控制台中的运行时请求处理程序已注册，但请求未被截获。MSW警告我，在我的控制台中“捕获了一个没有匹配请求处理程序的请求”。

我很感谢你的帮助！

Answer 1

看起来您正在尝试使用Cypress中的MSW工作人员来灵活地模拟API请求的响应。工作设置中的MSW处理程序似乎成功地拦截了Cypress测试运行中的请求，但是当您在Cypress中定义运行时请求处理程序时，API请求不会被截获。

一个潜在的问题可能是，在工作人员启动之前正在调用worker.use()方法。在Cypress测试的beforeEach块中，在从window对象访问worker之后立即调用worker.use()。但是，工作人员可能此时尚未启动，这将阻止注册运行时请求处理程序。

要解决这个问题，可以尝试在调用worker.use()方法之后，在./test/server/index.ts中的initMocks()函数中移动对worker.start()的调用。这将确保在工作人员启动后注册运行时请求处理程序，这将允许工作人员拦截API请求。

下面是如何修改./test/server/index.ts以解决此问题的示例：

async function initMocks() {
  if (typeof window !== "undefined") {
    const { worker } = await import("./testWorker");
    worker.start();

    // Move the call to worker.use() here
    const { graphql } = window.msw;
    worker.use(
      graphql
        .link("https://example/graphql.json")
        .query(/fetchdata/i, (req, res, ctx) => {
          return res(
            ctx.data({
              data
            })
          );
        })
    );
  }
}

initMocks();

export {};

在进行此更改之后，您应该能够在需要时使用Cypress中的运行时请求处理程序来拦截和模拟API请求。我希望这能帮到你!