如何使用Cypress Stub服务端渲染的HTML响应？

你的拦截生效但渲染异常，核心是两个关键细节没处理到位：响应头配置错误，或是mock的HTML不符合React SSR的渲染要求，给你几个可行的调整方案：

1. 补充正确的响应头 #

浏览器需要通过Content-Type: text/html识别返回内容为HTML，缺失这个头会导致内容被当成普通文本解析，直接引发渲染异常。修改拦截代码如下：

it("Example test", () => {
  // 定义符合SSR要求的完整HTML结构
  const mockHtml = `
    <!DOCTYPE html>
    <html>
      <head>
        <title>Mocked SSR Page</title>
        <!-- 必须引入客户端打包脚本，否则无法完成React hydration -->
        <script src="/static/js/main.js"></script>
      </head>
      <body>
        <!-- 包含React客户端挂载的根节点，和项目配置一致 -->
        <div id="root">
          <h1>Mocked SSR Content</h1>
        </div>
        <!-- 如果项目依赖服务端注入的全局状态，必须添加对应脚本 -->
        <script>
          window.__INITIAL_STATE__ = { user: { name: 'Mock User' } };
        </script>
      </body>
    </html>
  `;

  cy.intercept('GET', '/some-network-call', {
    statusCode: 200,
    headers: {
      'Content-Type': 'text/html; charset=utf-8' // 关键：设置正确的响应头
    },
    body: mockHtml
  }).as('mockedResponse');

  cy.visit("http://localhost:3000");

  cy.wait('@mockedResponse').then(() => {
    cy.screenshot("Test Screenshot");
  });
});

2. 确保HTML结构匹配SSR要求 #

• 必须包含React客户端挂载的根节点（比如id="root"），否则客户端无法完成hydration流程，页面会无响应或报错。
• 要引入项目的客户端打包脚本，否则服务端渲染的静态HTML无法和客户端JS关联，失去交互能力。
• 如果项目依赖服务端注入的全局状态（如window.__INITIAL_STATE__），一定要在mock HTML中添加对应脚本，否则客户端初始化时会因缺失状态崩溃。

3. 进阶：复用真实SSR HTML片段 #

如果不想手写完整HTML，可以先获取一次真实页面的SSR内容，修改后作为mock响应，确保结构和真实环境完全一致：

it("Example test", () => {
  // 先请求真实页面获取SSR HTML
  cy.request('GET', 'http://localhost:3000/some-network-call')
    .then(response => {
      const realSsrHtml = response.body;
      // 替换需要mock的内容
      const modifiedHtml = realSsrHtml.replace('Original Title', 'Mocked Title');

      // 用修改后的HTML做拦截
      cy.intercept('GET', '/some-network-call', {
        statusCode: 200,
        headers: {
          'Content-Type': 'text/html; charset=utf-8'
        },
        body: modifiedHtml
      }).as('mockedResponse');
    });

  cy.visit("http://localhost:3000");
  cy.wait('@mockedResponse').then(() => {
    cy.screenshot("Test Screenshot");
  });
});

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