testing - MSW 请求处理程序在编剧测试中不起作用

Question

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

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

这是我的 index.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 worker 并在 playwright 测试文件中定义请求处理程序时，测试失败了。这是编剧测试文件:

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

我敢打赌它不起作用，因为您在“剧作家”上下文中而不是在浏览器的上下文中启动您的 worker。所以页面永远不会启动工作人员并且无法拦截任何请求。剧作家似乎也只支持服务人员。

现在看来您应该使用基于服务器的 msw 解决方案包装剧作家的模拟。

我找到了这个包 https://github.com/valendres/playwright-msw .你可以在这里检查这个想法