如何在Enzyme测试中访问dangerouslySetInnerHTML生成的实际渲染HTML

这个问题我之前也碰到过！核心原因是你可能用了Enzyme的shallow渲染——它不会完整解析dangerouslySetInnerHTML插入的HTML内容，只会停留在组件的表层渲染，所以才会返回转义后的标签和[object Object]这种奇怪的结果。下面是具体的解决方法：

1. 切换到mount全渲染模式 #

Enzyme的mount会把组件渲染到完整的DOM环境（基于jsdom），能正确解析并渲染dangerouslySetInnerHTML中的HTML内容。把原来的shallow替换成mount即可：

// 替换前
const wrapper = shallow(<YourComponent />);

// 替换后
const wrapper = mount(<YourComponent />);

2. 正确获取渲染后的HTML内容 #

用mount渲染后，你可以通过以下两种方式获取真实的HTML：

方式一：获取整个组件的HTML #

直接调用wrapper.html()就能拿到完整的渲染结果，包括dangerouslySetInnerHTML插入的内容：

const renderedHtml = wrapper.html();
expect(renderedHtml).toContain('<button class="your-btn-class">按钮文本</button>');

方式二：精准获取某元素的innerHTML #

如果你只需要某个特定容器内的HTML内容，可以通过getDOMNode()拿到真实的DOM元素，再读取它的innerHTML：

const targetElement = wrapper.find('.html-container').getDOMNode();
expect(targetElement.innerHTML).toBe('<button class="your-btn-class">按钮文本</button>');

额外注意事项 #

• 确保你的dangerouslySetInnerHTML写法正确：必须是{ __html: '你的HTML内容' }，注意是双下划线的__html，不要写错成单下划线或者其他形式。
• 如果HTML内容是动态生成的（比如从props或state获取），记得在测试中触发组件更新后再获取内容，可以调用wrapper.update()确保DOM已更新。

举个完整的测试例子：
假设你的组件代码是：

function HtmlRenderComponent({ htmlContent }) {
  return <div className="html-container" dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

对应的测试代码：

import { mount } from 'enzyme';
import HtmlRenderComponent from './HtmlRenderComponent';

test('renders dangerouslySetInnerHTML content correctly', () => {
  const testHtml = '<button class="test-btn">Click Me</button>';
  const wrapper = mount(<HtmlRenderComponent htmlContent={testHtml} />);
  
  // 验证整个组件的HTML
  expect(wrapper.html()).toContain(testHtml);
  
  // 验证容器内的innerHTML
  const container = wrapper.find('.html-container').getDOMNode();
  expect(container.innerHTML).toBe(testHtml);
});

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