如何使用@testing-library/react测试服务端渲染(SSR)？

你遇到的错误是因为使用hydrate: true时，React期望当前DOM中已经存在服务端预渲染的HTML，但测试环境初始DOM是空的，导致客户端渲染内容和服务端内容不匹配，触发Hydration错误。

修改后的测试用例 #

import { render, screen } from '@testing-library/react'

describe('Test', () => {
  it('should CSR', () => {
    render(<div data-testid="output">Test</div>);
    expect(screen.getByTestId('output')).toHaveTextContent('Test');
  });

  it('should SSR', () => {
    // 1. 模拟服务端渲染的HTML，提前插入到jsdom的DOM中
    document.body.innerHTML = '<div data-testid="output">Test</div>';
    
    // 2. 使用hydrate模式渲染，匹配已存在的DOM内容
    render(<div data-testid="output">Test</div>, { hydrate: true });
    
    // 3. 验证Hydration后的内容正确性
    expect(screen.getByTestId('output')).toHaveTextContent('Test');
  });
});

关键修改点说明 #

• 预插入服务端HTML：在调用render前，把服务端会渲染的HTML字符串赋值给document.body.innerHTML，让jsdom的初始DOM和服务端渲染结果一致。
• 移除不必要的act包裹：Testing Library的render方法已经内部处理了React的异步更新，手动包裹act是多余的，反而可能引发不必要的警告。
• 确保内容完全匹配：服务端HTML和客户端渲染的组件结构、文本、属性必须完全一致，否则仍会触发Hydration不匹配错误。

关于jest配置 #

你的jest.config.json配置无需修改，jsdom环境已经满足测试SSR Hydration的需求。

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