使用React/Enzyme/Jest搭配Next.js能否获取完整页面HTML？

当然可以做到！不过因为Next.js的Head组件是异步注入到文档头部的，所以需要稍微处理一下才能拿到包含头部内容的完整页面HTML，下面是具体的实现方法：

核心思路 #

• 用Enzyme的mount方法（而非shallow）挂载组件，确保渲染完整的组件树，包括嵌套的desktop-header、mobile-header和Next.js的Head
• 等待Head组件的内容异步注入到文档头部后，再组合头部和body的HTML得到完整页面

具体测试代码示例 #

import React from 'react';
import { mount } from 'enzyme';
import waitFor from 'wait-for-expect';
import YourHeaderComponent from '../components/YourHeaderComponent'; // 替换成你的组件实际路径

describe('Full Page HTML Capture', () => {
  it('should retrieve complete page HTML including Next.js Head content', async () => {
    // 挂载目标组件
    const wrapper = mount(<YourHeaderComponent language="en" country="us" />);

    // 等待Head中的内容（比如script标签）注入到document.head
    await waitFor(() => {
      expect(document.head.querySelector('script')).not.toBeNull();
    });

    // 组合head和body的HTML，生成完整页面结构
    const fullPageHtml = `<!DOCTYPE html>
<html>
  <head>${document.head.innerHTML}</head>
  <body>${wrapper.html()}</body>
</html>`;

    // 验证HTML内容（示例断言，可根据需求调整）
    expect(fullPageHtml).toContain('edf-header');
    expect(fullPageHtml).toContain('dangerouslySetInnerHTML');
    
    // 若需要查看完整HTML，可取消注释打印输出
    // console.log(fullPageHtml);
  });
});

关键注意事项 #

• 不要用shallow渲染：shallow只会渲染组件本身，不会处理子组件（包括Head和内部的头部容器），无法获取完整内容
• 处理异步操作：除了Head的异步注入，如果组件包含数据请求等其他异步逻辑，需要用waitFor或jest.runAllTimers()等待所有异步操作完成
• 依赖配置：如果使用wait-for-expect，需要先通过npm install wait-for-expect --save-dev安装，并可在Jest的setupFilesAfterEnv中配置全局引入

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