Next.js Discord

Discord Forum

NextJS can't read headers when using MSW and Playwright

Unanswered
Blizzard posted this in #help-forum
Open in Discord
Error
- error TypeError: Cannot read properties of undefined (reading 'headers')
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:266:61)


test.spec.ts
import { server } from "../mocks/server";
import { test, expect } from "@playwright/test";
import user from "./user";
test.beforeAll(() => server.listen());

// Reset any request handlers that we may add during the tests,

// so they don't affect other tests.

test.afterEach(() => server.resetHandlers());

// Clean up after the tests are finished.

test.afterAll(() => server.close());

test("show post", async ({ page }) => {
  await page.route("*/**/api/post?id=1", async (route) => {
    const json = {
      post: user.posts[0],
    };

    route.fulfill({ json });
  });

  await page.goto(`http://localhost:7040/@example/1`);
  await expect(page.getByText("test
")).toBeVisible();
});

test("show profile", async ({ page }) => {
  await page.route("*/**/api/profile?username=example", async (route) => {
    const json = {
      user: user,

    };
    route.fulfill({ json });
  });
  await page.goto(`http://localhost:7040/@example`);
  await expect(page.getByText("hello world")).toBeVisible();
});


handler.ts
import { rest } from "msw";
const user = {
  id: 1,
  email: "test@example.com",
  username: "example",
  avatar: "",
  banner: "",
  displayname: "",
  description: "",
  posts: [
    {
      id: 1,
      content: "test",
      authorId: 1,
      createdAt: "2023-09-03T16:01:49.169Z",
      image: null,
      replyId: null,
      author: {
        id: 1,
        email: "test@example.com",
        username: "example",
        avatar: "",
        banner: "",
        displayname: "",
        description: "",
        followers: [],
        following: [],
      },
      likes: [],
      reposts: [],
      reply: null,
      replies: [],
    },
  ],
};

export const handlers = [
  rest.get("/api/profile", (req, res, ctx) => {
    return res(
      ctx.set("Content-Type", "application/json"),

      ctx.json({
        user,
      }),
    );
  }),
  rest.get("/api/post", (req, res, ctx) => {
    return res(
      ctx.set("Content-Type", "application/json"),
      ctx.json({
        post: user.posts[0],
      }),
    );
  }),
];

1 Reply

@Blizzard `Error` - error TypeError: Cannot read properties of undefined (reading 'headers') at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:266:61) `test.spec.ts` typescript import { server } from "../mocks/server"; import { test, expect } from "@playwright/test"; import user from "./user"; test.beforeAll(() => server.listen()); // Reset any request handlers that we may add during the tests, // so they don't affect other tests. test.afterEach(() => server.resetHandlers()); // Clean up after the tests are finished. test.afterAll(() => server.close()); test("show post", async ({ page }) => { await page.route("*/**/api/post?id=1", async (route) => { const json = { post: user.posts[0], }; route.fulfill({ json }); }); await page.goto(`http://localhost:7040/@example/1`); await expect(page.getByText("test ")).toBeVisible(); }); test("show profile", async ({ page }) => { await page.route("*/**/api/profile?username=example", async (route) => { const json = { user: user, }; route.fulfill({ json }); }); await page.goto(`http://localhost:7040/@example`); await expect(page.getByText("hello world")).toBeVisible(); }); `handler.ts` typescript import { rest } from "msw"; const user = { id: 1, email: "test@example.com", username: "example", avatar: "", banner: "", displayname: "", description: "", posts: [ { id: 1, content: "test", authorId: 1, createdAt: "2023-09-03T16:01:49.169Z", image: null, replyId: null, author: { id: 1, email: "test@example.com", username: "example", avatar: "", banner: "", displayname: "", description: "", followers: [], following: [], }, likes: [], reposts: [], reply: null, replies: [], }, ], }; export const handlers = [ rest.get("/api/profile", (req, res, ctx) => { return res( ctx.set("Content-Type", "application/json"), ctx.json({ user, }), ); }), rest.get("/api/post", (req, res, ctx) => { return res( ctx.set("Content-Type", "application/json"), ctx.json({ post: user.posts[0], }), ); }), ];
I know it's been a long while, but I have encountered a very similar issue (NextJS cannot read, nor mock headers() or cookies() from next/headers when using msw and jest, in my instance) and wondered if you had found any solution?