Enzyme Shallow快照不关心子组件顺序问题咨询

这是个很典型的Enzyme浅渲染快照陷阱，我来帮你拆解问题和解决方案：

你看到的快照一致的核心原因是Enzyme的Shallow渲染默认不会深入解析自定义组件的内部结构。

在你的案例中，Title和Content都是自定义组件，Shallow渲染只会把它们识别为通用的<Component />占位符，而不会展开它们的真实内容（比如<h1>Hello World</h1>）。这就导致不管你在Page1和Page2里调换两个组件的顺序，生成的快照里都是两个<Component />，看起来完全一致。

根据你的测试需求，有几种不同的处理方式：

1. 用dive()深入渲染自定义组件 #

如果你想在浅渲染的基础上，让快照反映出Title和Content的真实内容以及顺序差异，可以对自定义组件调用dive()方法，强制Enzyme深入一层渲染它们的内部结构。示例代码：

import { shallow } from 'enzyme';
import Page1 from './Page1';
import Page2 from './Page2';

describe('Page components', () => {
  it('Page1 snapshot preserves component order and content', () => {
    const wrapper = shallow(<Page1 />);
    // 对每个自定义组件执行dive，展开内部结构
    wrapper.find('Title').forEach(node => node.dive());
    wrapper.find('Content').forEach(node => node.dive());
    expect(wrapper).toMatchSnapshot();
  });

  it('Page2 snapshot preserves component order and content', () => {
    const wrapper = shallow(<Page2 />);
    wrapper.find('Title').forEach(node => node.dive());
    wrapper.find('Content').forEach(node => node.dive());
    expect(wrapper).toMatchSnapshot();
  });
});

生成的快照会包含Title和Content的真实DOM结构，顺序不同的话快照自然会有差异。

2. 使用mount()进行完整渲染 #

如果你不需要浅渲染的隔离特性，直接用mount()方法做全量渲染，它会自动深入渲染所有子组件的内容，这样生成的快照能完整反映页面结构和组件顺序：

import { mount } from 'enzyme';
import Page1 from './Page1';
import Page2 from './Page2';

describe('Page components', () => {
  it('Page1 full render snapshot matches', () => {
    const wrapper = mount(<Page1 />);
    expect(wrapper).toMatchSnapshot();
  });

  it('Page2 full render snapshot matches', () => {
    const wrapper = mount(<Page2 />);
    expect(wrapper).toMatchSnapshot();
  });
});

3. 配置快照序列化器显示真实组件名 #

如果只需要区分组件的顺序，不需要看到内部内容，可以用enzyme-to-json序列化器替换默认的快照处理逻辑，让Shallow渲染时显示自定义组件的真实名称（比如<Title />、<Content />）而不是通用的<Component />：

首先安装依赖：

npm install enzyme-to-json --save-dev

然后在测试文件中配置使用：

import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import Page1 from './Page1';
import Page2 from './Page2';

describe('Page components', () => {
  it('Page1 snapshot shows component order', () => {
    const wrapper = shallow(<Page1 />);
    expect(toJson(wrapper)).toMatchSnapshot();
  });

  it('Page2 snapshot shows component order', () => {
    const wrapper = shallow(<Page2 />);
    expect(toJson(wrapper)).toMatchSnapshot();
  });
});

这种方案下，Page1的快照会显示<div><Title /><Content /></div>，Page2则是<div><Content /><Title /></div>，两者的差异会被正确捕捉。

你的问题本质是Enzyme浅渲染的默认行为掩盖了自定义组件的身份和顺序。如果需要完整的DOM结构对比，用mount或dive；如果只需要区分组件顺序，配置enzyme-to-json就足够了。

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