No responses with await response.json() when using Jest & undici polyfill

[jeffwong14]

The same code worked in version 1.3.2 but not working after changed to 2
I followed the migration guide to change the rest.get -> http.get , return HttpResponse.json(xxx)
But the test cases still don't have response.

So I simulate the case out with simple code

The fetch response is able to print out (added below). However, my code stopped around await resp.json()

Could anyone told me what's wrong with my case ?

Code Sandbox

My case

import { HttpResponse, http } from "msw";
import { setupServer } from "msw/node";

const hardCodeNow = new Date(2023, 8, 1, 0, 0, 0, 0);

const thisHost = "http://localhost";

const generateResp = () =>
  http.get(`${thisHost}/picture`, () => {
    return HttpResponse.json({ result: "success" }, { status: 200 });
  });

const server = setupServer(generateResp());

beforeAll(() => {
  server.listen();
  server.events.on("request:start", ({ request }) => {
    console.log("MSW intercepted:", request.method, request.url);
  });
});

beforeEach(() => {
  jest.useFakeTimers({
    now: hardCodeNow,
  });
  jest.resetModules();
  sessionStorage.clear();
  localStorage.clear();
});

afterEach(() => {
  jest.clearAllMocks();
  jest.runOnlyPendingTimers();
  jest.useRealTimers();
  server.resetHandlers();
});

afterAll(() => {
  server.close();
});

describe("Test MSW", () => {
  it("MSW 1", async () => {
    server.use(generateResp());
    const resp = await fetch(`${thisHost}/picture`);
    if (!resp.ok) {
      throw new Error("Response not ok");
    }
    console.log(resp);
    const x = await resp.json();
// ^^^ code stopped here 
    console.log(x);
  });
});

The libraries I used

  "devDependencies": {
    "@testing-library/jest-dom": "6.1.4",
    "@testing-library/react": "14.0.0",
    "jest": "29.7.0",
    "jest-environment-jsdom": "29.7.0",
    "jest-localstorage-mock": "2.4.26",
    "msw": "2.0.2",
    "typescript": "5.2.2",
    "undici": "^5.27.0"
  },
  "dependencies": {
    "next": "^14.0.1",
    "react": "18.2.0"
  }

jest.config

const nextJest = require("next/jest");

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: "./",
});

// Add any custom config to be passed to Jest
const customJestConfig = {
  resetMocks: false,
  workerIdleMemoryLimit: "512MB",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  setupFiles: ["<rootDir>/jest.polyfills.js"],
  testEnvironmentOptions: {
    customExportConditions: [""],
  },
  transform: {},
  testEnvironment: "jest-environment-jsdom",
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);

Polyfill

// jest.polyfills.js
const { TextEncoder, TextDecoder } = require("node:util");

Reflect.set(globalThis, "TextEncoder", TextEncoder);
Reflect.set(globalThis, "TextDecoder", TextDecoder);

const { Blob } = require("node:buffer");
const { fetch, Request, Response, Headers, FormData } = require("undici");

Reflect.set(globalThis, "fetch", fetch);
Reflect.set(globalThis, "Blob", Blob);
Reflect.set(globalThis, "Request", Request);
Reflect.set(globalThis, "Response", Response);
Reflect.set(globalThis, "Headers", Headers);
Reflect.set(globalThis, "FormData", FormData);

Response Result

Response {
      url: 'http://localhost/picture',
      [Symbol(realm)]: { settingsObject: {} },
      [Symbol(state)]: {
        aborted: false,
        rangeRequested: false,
        timingAllowPassed: false,
        requestIncludesCredentials: false,
        type: 'default',
        status: 200,
        timingInfo: null,
        cacheState: '',
        statusText: 'OK',
        headersList: HeadersList {
          cookies: null,
          [Symbol(headers map)]: [Map],
          [Symbol(headers map sorted)]: null
        },
        urlList: [],
        body: { stream: undefined, source: null, length: null }
      },
      [Symbol(headers)]: HeadersList {
        cookies: null,
        [Symbol(headers map)]: Map(1) { 'content-type' => [Object] },
        [Symbol(headers map sorted)]: null
      }
    }

[jeffwong14]

I found I should be in the same situation as #1830
As the problem resolved if i removed all the fakeTimers related codes

[mattcosta7]

@jeffwong14 - I believe the issue stems from an implementation of fake timers in jest combined with the way node's fetch implementation, unidici works.

this doesn't seem to be something we can fix directly in MSW as far as I can tell, but instead we would need changes in undici.

I have more discovery as well as 2 workarounds here: #1830 (comment)

---

And the relevant workarounds copied here:

1. use legacy fake times

  jest.useFakeTimers({
    now: hardCodeNow,
    legacyFakeTimers: true,
  });

2. avoid faking queueMicrotask

  jest.useFakeTimers({
    now: hardCodeNow,
    doNotFake: ["queueMicrotask"],
  });

[mattcosta7]

also, thank you for the sandbox, which really helped me while digging into this!

[jeffwong14]

Many thanks @mattcosta7 for your advice
Really appreciated :)