Cypress拦截Next.js React Server Components请求遇Connection closed错误

在Cypress测试中拦截React Server Components（RSC）发起的客户端请求，复制了网络面板中的请求响应（含请求头）到cy.intercept函数后，始终出现Connection closed错误，前端请求结果返回undefined。

当前intercept实现代码 #

cy.intercept("POST", "/account/register", {
  statusCode: 200,
  headers: {
    "x-action-revalidated": "[[],0,0]",
    "content-type": "text/x-component",
  },
  body: `0:["$@1",["development",null]]\n1:{"result":"success","status":200,"data":{"id":"91ffe221-ace9-40a1-98d5-2851cb071cbd","name":"Test User","email":"test@test.com","createdAt":"$D2024-05-26T16:32:11.280Z","updatedAt":"$D2024-05-26T14:32:11.288Z"}}`,
}).as("registerRequest");

控制台错误信息 #

index-3fe21bb9.js:133640 Error: The following error originated from your application code, not from Cypress. It was caused by an unhandled promise rejection.

  > Connection closed.

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.
    at close (webpack-internal:///app-pages-browser/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2131:31)
    at progress (webpack-internal:///app-pages-browser/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2148:7)
From previous event:
    at Promise.longStackTracesCaptureStackTrace [as _captureStackTrace] (http://localhost:3000/__cypress/runner/cypress_runner.js:3486:19)
    at Promise._then (http://localhost:3000/__cypress/runner/cypress_runner.js:1239:17)
    at Promise._passThrough (http://localhost:3000/__cypress/runner/cypress_runner.js:4110:17)
    at Promise.lastly.Promise.finally (http://localhost:3000/__cypress/runner/cypress_runner.js:4119:17)
    at Object.onRunnableRun (http://localhost:3000/__cypress/runner/cypress_runner.js:162793:53)
    at $Cypress.action (http://localhost:3000/__cypress/runner/cypress_runner.js:41042:28)
    at Runnable.run (http://localhost:3000/__cypress/runner/cypress_runner.js:145381:13)
    at Runner.runTest (http://localhost:3000/__cypress/runner/cypress_runner.js:155323:10)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:155449:12
    at next (http://localhost:3000/__cypress/runner/cypress_runner.js:155232:14)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:155242:7
    at next (http://localhost:3000/__cypress/runner/cypress_runner.js:155144:14)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:155210:5
    at timeslice (http://localhost:3000/__cypress/runner/cypress_runner.js:145721:27)

解决方案 #

• 补充分块传输编码响应头：RSC请求依赖transfer-encoding: chunked头来处理流式响应，缺少这个头会让客户端误以为连接提前关闭。修改headers配置：

  headers: {
    "x-action-revalidated": "[[],0,0]",
    "content-type": "text/x-component",
    "transfer-encoding": "chunked"
  },
  

• 适配RSC流格式与Cypress动态响应：RSC的响应是换行分隔的流，需要在响应体末尾添加额外的换行符（\n）标记流结束；同时开启Cypress的dynamic: true选项，适配流式响应的处理逻辑：

  cy.intercept("POST", "/account/register", {
    statusCode: 200,
    headers: {
      "x-action-revalidated": "[[],0,0]",
      "content-type": "text/x-component",
      "transfer-encoding": "chunked"
    },
    body: `0:["$@1",["development",null]]\n1:{"result":"success","status":200,"data":{"id":"91ffe221-ace9-40a1-98d5-2851cb071cbd","name":"Test User","email":"test@test.com","createdAt":"$D2024-05-26T16:32:11.280Z","updatedAt":"$D2024-05-26T14:32:11.288Z"}}\n`,
    dynamic: true
  }).as("registerRequest");
  

• 校验时间格式一致性：确认响应体中$D前缀的时间字符串与真实响应完全一致，RSC对该格式的解析要求严格，任何格式错误都会导致解析失败。

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