React Testing Library自动包裹组件为<div>引发DOM嵌套警告问题

这是React Testing Library（RTL）的默认行为，我来帮你拆解原因和解决办法：

原因分析 #

RTL的render函数默认会将你的组件挂载到一个<div>容器中，这么做的目的是兼容绝大多数React组件的渲染需求——毕竟很多组件本身并不是合法的顶级DOM元素（比如<thead>、<tbody>这类表格元素，按照HTML规范必须作为<table>的子元素存在）。如果直接渲染这些元素而不提供合法的父容器，浏览器可能会直接拒绝渲染或者自动修正DOM结构，导致测试结果不符合预期。

所以RTL自动添加的这个<div>是一个“兜底容器”，确保组件能正常渲染，但也因此触发了DOM嵌套合法性的警告，因为<thead>确实不能作为<div>的子元素。

解决办法 #

最合理的解决方案是模拟组件的真实使用场景，给它提供合法的父容器（也就是<table>），你可以通过render函数的wrapper选项来实现：

import { render } from '@testing-library/react';
import TableHeader from './TableHeader';

test('renders TableHeader correctly', () => {
  const { container } = render(<TableHeader />, {
    // 用table作为包裹容器，符合HTML规范
    wrapper: ({ children }) => <table>{children}</table>
  });
  expect(container).toMatchSnapshot();
});

这样渲染后的DOM结构就会是<table><thead>...</thead></table>，完全符合HTML规范，警告会消失，快照也会记录正确的组件结构。

另外补充一点：这个警告其实是个很好的提示——你的<TableHeader>组件本身就是为表格设计的，测试时模拟它在真实环境中的使用方式，也能让你的测试更贴近实际业务场景，测试结果更可靠。

内容的提问来源于stack exchange，提问作者marcus-linmarkson