Enzyme的shallow方法无法渲染JSX组件仅返回空对象问题求助

问题原因汇总 #

• 传入props不全：Header组件依赖的toggleSort、sortRestaurants、handleResults、showSideMenuToggle四个props未在测试中传入，若组件没有配置默认props，运行时会抛出异常导致渲染中断，最终返回空结果。
• Enzyme选择器使用错误：测试代码中类选择器未加.前缀，查找组件时错误传入JSX而非组件引用，会导致断言失败，也会让你误以为组件未正常渲染。
• 缺少Enzyme适配器配置：Enzyme需要根据你的React版本配置对应适配器，未做配置的情况下无法正常解析渲染React组件，是返回空对象的常见原因。
• React与Enzyme版本不兼容：官方Enzyme仅支持到React16，React17、React18需要使用社区维护的对应适配器，版本不匹配会直接导致渲染失败。
• 打印验证方式错误：ShallowWrapper是Enzyme封装的类实例，直接调用console.log(wrapper)会因为属性不可枚举显示为类似空对象的结构，并非真的没有渲染。

具体修复步骤 #

1. 补全测试传入的props，所有组件依赖的属性都需要传入，函数类型可以用jest模拟：

const props = {
  restaurantData: {},
  showSideMenu: false,
  toggleSort: jest.fn(),
  sortRestaurants: jest.fn(),
  handleResults: jest.fn(),
  showSideMenuToggle: jest.fn(),
}

2. 修正Enzyme选择器写法：

// 类选择器需要加.前缀
expect(wrapper.find('.header__container')).toHaveLength(1);
expect(wrapper.find('img')).toHaveLength(1);
// 查找组件直接传入组件引用即可，不需要写JSX
expect(wrapper.find(FilterBtn)).toHaveLength(1);
expect(wrapper.find(SearchBar)).toHaveLength(1);

3. 验证适配器配置：在测试全局入口文件（通常是src/setupTests.js）中添加对应版本的适配器配置，以React17为例：

import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

Enzyme.configure({ adapter: new Adapter() });

如果使用React18，需要先安装社区适配包@cfaester/enzyme-adapter-react-18，再替换上述配置中的适配器即可。

4. 验证渲染结果时，调用wrapper.debug()方法输出实际渲染的DOM结构，确认是否真的渲染失败：

const wrapper = shallow(<Header {...props} />);
console.log(wrapper.debug()); // 输出真实渲染内容

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