React项目使用Jest+Enzyme做组件快照测试为何得到空快照

你当前生成的空快照，本质是Enzyme返回的ShallowWrapper实例没有被Jest快照序列化器正确解析，不属于组件渲染本身的逻辑问题。

• 直接将Enzyme Wrapper实例作为快照值，未做可序列化转换
  shallow()返回的是Enzyme封装的操作类实例，不是Jest默认可识别的原生React元素/普通DOM结构。默认Jest序列化器只会读取实例的可枚举公开属性，无法解析ShallowWrapper内部封装的私有渲染节点，最终只会输出类名对应的ShallowWrapper {}空结构。
  很多入门教程默认使用者已经配置好Enzyme配套的快照序列化器，直接写出传入Wrapper的快照代码，新手直接复制测试逻辑却漏掉配置，就会触发这个问题。
  修复方式分两种场景：
  1. 无需第三方插件的快速写法：手动调用Wrapper的实例方法拿到可序列化渲染内容，再生成快照

     it('should render correctly', () => {
       const tree = shallow(<Button />);
       // debug() 会返回当前组件渲染结构的原生字符串
       expect(tree.debug()).toMatchSnapshot();
     });
     

  2. 适配常规测试写法的配置方案：安装配置enzyme-to-json作为Jest全局快照序列化器，无需手动转换

     // 在jest.config.js中添加全局配置
     module.exports = {
       snapshotSerializers: ['enzyme-to-json/serializer']
     }
     

     配置完成后，直接将shallow/mount生成的Wrapper传入toMatchSnapshot()，即可自动解析完整渲染结构生成正确快照。
• 组件本身返回空渲染节点
  完成上述序列化配置后如果快照仍为空，需检查组件本身的输出逻辑：
  • 确认组件的导入方式和导出方式匹配，避免拿到undefined的组件引用
  • 检查组件是否存在无传入props时直接返回null的判断逻辑（比如未传入children就不渲染任何节点的分支）
    这类场景可以通过打印tree.debug()的实际输出，确认组件渲染状态，再针对性补充测试所需的props值。

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