如何使用Jest测试动态生成的HTML且不依赖快照

嘿，我完全懂你不想依赖快照测试的心情——快照虽然方便，但维护起来容易闹心，直接对比生成和预期的HTML/React元素确实更直观灵活。针对你的场景，这里有几个实用的方法：

1. 用react-test-renderer转JSON对比（最推荐） #

React官方的react-test-renderer可以把元素转换成结构化的JSON对象，这样就能用Jest的toEqual精准对比元素的结构、属性和内容，完全不需要快照。

举个适配你代码的例子：

import renderer from 'react-test-renderer';

test('should create div elements', () => {
  const expectedElements = <div><div key={1}>test</div></div>;
  const generatedElements = [<div key={1}>test</div>];
  // 把生成的数组包裹到和预期一致的外层div里
  const wrappedGenerated = <div>{generatedElements}</div>;

  // 将两个元素都转成JSON后对比
  const generatedJson = renderer.create(wrappedGenerated).toJSON();
  const expectedJson = renderer.create(expectedElements).toJSON();
  
  expect(generatedJson).toEqual(expectedJson);
});

这个方法的优势是只对比React元素的核心结构，不会被渲染时的空格、属性顺序等无关细节干扰，比字符串对比更可靠。

2. 渲染后对比HTML字符串 #

如果你更习惯直接看HTML代码，可以用@testing-library/react渲染元素后获取HTML字符串，再做对比。不过要注意处理格式差异的问题：

import { render } from '@testing-library/react';
import beautify from 'html-beautify'; // 需要先安装：npm install html-beautify --save-dev

test('should create div elements', () => {
  const expectedElements = <div><div key={1}>test</div></div>;
  const generatedElements = [<div key={1}>test</div>];
  const wrappedGenerated = <div>{generatedElements}</div>;

  // 获取渲染后的原始HTML
  const generatedHtml = render(wrappedGenerated).container.innerHTML;
  const expectedHtml = render(expectedElements).container.innerHTML;

  // 统一格式化后再对比，避免空格/换行导致的误判
  const formattedGenerated = beautify(generatedHtml, { indent_size: 2, preserve_newlines: false });
  const formattedExpected = beautify(expectedHtml, { indent_size: 2, preserve_newlines: false });
  
  expect(formattedGenerated).toBe(formattedExpected);
});

3. 手动对比关键属性（适合精细化测试） #

如果只需要验证元素的特定部分（比如子元素数量、某个属性值），可以直接访问React元素的props来做断言，这种方式最灵活：

test('should create div elements', () => {
  const generatedElements = [<div key={1}>test</div>];
  const wrappedGenerated = <div>{generatedElements}</div>;

  // 验证外层div的子元素数量
  expect(wrappedGenerated.props.children.length).toBe(1);
  
  // 验证第一个子元素的类型、内容和key
  const childElement = wrappedGenerated.props.children[0];
  expect(childElement.type).toBe('div');
  expect(childElement.props.children).toBe('test');
  expect(childElement.key).toBe(1);
});

小提示 #

• 优先用第一种方法，它是React官方推荐的元素对比方式，适配性最好；
• 如果用字符串对比，一定要格式化后再对比，不然很容易因为React渲染时的自动格式调整导致测试失败；
• 手动对比适合那些不需要全量验证，只关注核心逻辑的场景。

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