使用MSW模拟流式API时出现TypeError：ReadableStream已锁定

解决方案1：替换为Web API标准Response对象 #

在Node.js环境下，MSW需要处理Web API标准的Response对象，而非Node.js内置的HttpResponse。修改makeResponse函数：

export function makeResponse(data: string[], delay = 0): Response {
  return new Response(makeStream(data, delay), { status: 200 });
}

解决方案2：禁用MSW响应体自动解析 #

MSW默认会解析响应体用于日志记录，这会提前读取流式响应导致流被锁定。启动测试服务器时添加对应配置：

beforeAll(() => {
   server.listen({ disableResponseBodyParsing: true });
});

原因分析 #

1. 使用Node.js内置HttpResponse会导致MSW处理异常，内部读取流使其进入锁定状态；
2. MSW默认的响应体解析逻辑会自动消费流式响应，导致后续代码无法再获取阅读器或执行管道操作。

修改后的完整代码示例 #

测试设置代码 #

import { setupServer } from "msw/node";

const restHandlers = [
  http.post(`/path/to/my/api?jwt=jwt`, async () => {
    return makeResponse([JSON.stringify({ type: "text", payload: "text" })]);
  }),
];

const server = setupServer(...restHandlers);

beforeAll(() => {
   server.listen({ disableResponseBodyParsing: true });
});

makeResponse函数代码 #

function makeStream(data: string[], delay: number) {
  const encoder = new TextEncoder();
  const arr = data.map((chunk: string) => encoder.encode(chunk));
  const underlyingSource = {
    start: (controller: ReadableStreamDefaultController) => {
      setTimeout(() => {
        arr.forEach((chunk: Uint8Array) => controller.enqueue(chunk));
        controller.close();
      }, delay);
    },
  };
  return new ReadableStream<Uint8Array>(underlyingSource);
}

export function makeResponse(data: string[], delay = 0): Response {
  return new Response(makeStream(data, delay), { status: 200 });
}

内容的提问来源于stack exchange，提问作者sijo josan