使用React.createPortal的RTL快照测试为何生成undefined快照？

React.createPortal会把组件内容挂载到你指定的DOM节点（这里是id为page的节点），而React Testing Library（RTL）的render函数返回的container，是RTL默认创建的用来挂载组件根元素的容器——但你的Portal内容根本不在这个默认容器里，所以container.firstChild自然是undefined。

直接针对你手动创建的page节点做快照匹配即可，因为组件内容实际渲染在这个节点里。

示例测试代码 #

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

// 测试前后清理page节点
beforeEach(() => {
  const pageNode = document.createElement('div');
  pageNode.id = 'page';
  document.body.appendChild(pageNode);
});

afterEach(() => {
  const pageNode = document.getElementById('page');
  if (pageNode) document.body.removeChild(pageNode);
});

test('MyComponent renders portal content correctly', () => {
  render(<MyComponent isVisible={true} />);
  
  // 获取目标挂载节点并做快照
  const pageNode = document.getElementById('page');
  expect(pageNode).toMatchSnapshot();
  
  // 或者直接查询内容元素做快照
  expect(screen.getByText('你的Portal内容文本')).toMatchSnapshot();
});

额外说明 #

如果只是想验证Portal内容是否渲染，也可以用screen.debug(document.getElementById('page'))来单独查看该节点的内容，确认渲染结果符合预期后再做快照。

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