MSW请求处理程序不在剧作家测试中工作

Question

我有一个 Nextjs 项目，在 playwright 中进行测试，对于模拟 API，我正在使用 Mock Service Worker (MSW) 库。

我已经安装并设置了所有内容，并且当我在 _app.tsx 文件中运行 MSW Worker 时，它正确模拟了 API。

这是我的 index.html 。 tsx 根据对 http://localhost:500/user 的 API 调用显示“John”或“Failed”

import React, { useState } from "react";

export default function Home() {
  const [user, setUser] = useState<any>();
  const [error, setError] = useState<string>();

  const fetchUser = async () => {
    try {
      const response = await fetch("http://localhost:5000/user");
      const user = await response.json();
      setUser(user);
    } catch (error) {
      console.log(error);
      setError("Failed");
    }
  };

  return (
    <div>
      {error && <div data-testid="content">{error}</div>}
      {user && <div data-testid="content">{user.name}</div>}
      <button data-testid="btn" onClick={() => fetchUser()}>
        Submit
      </button>
    </div>
  );
}

但是当我使用 MSW 工作程序并在剧作家测试文件，测试失败。这是剧作家测试文件：

import { test, expect } from "@playwright/test";
import { setupWorker, rest } from "msw";

test.describe("Request tests", () => {
  test.beforeAll(() => {
    if (typeof window !== "undefined") {
      const worker = setupWorker(
        rest.get("http://localhost:5000/user", (req, res, ctx) => {
          return res(ctx.status(200), ctx.json({ name: "John" }));
        })
      );
      worker.start();
    }
  });

  test.beforeEach(async ({ page }) => {
    await page.goto("http://localhost:3000/");
  });

  test("should display John when submit is clicked", async ({ page }) => {
    await page.locator("[data-testid=btn]").click();
    await expect(page.locator("[data-testid=content]")).toContainText("John");
  });
});

即使我已经定义了 MSW 请求处理程序，测试也会失败，但它并没有模拟响应，因此我们在页面上没有得到文本 John。

请求处理程序不工作的原因可能是什么？是我使用方式不对吗？

以下是 github 存储库的链接 - https://github.com/rajmasha/nextjs-testing

Answer 1

我敢打赌，这是不起作用的，因为您在“剧作家”上下文中启动了工人，而不是在浏览器的上下文中。因此，页面永远不会启动工人，也不能拦截任何请求。似乎剧作家仅支持服务工作者。

似乎现在您应该用基于服务器的MSW解决方案包装剧作家的模拟。

我发现此软件包 https://github.com/valendres/playwright-msw 。您可以在这里检查这个想法