如何测试通过Enzyme simulate调用的事件处理程序的返回值？

问题背景 #

你需要测试通过Enzyme的simulate调用事件处理程序后的返回值，但simulate方法返回的是ShallowWrapper本身，而非事件处理函数的返回值；同时该事件处理程序属于无状态回调，无法通过组件状态变化来断言执行结果。现有组件和测试代码如下：

组件代码：

function SomeParentComponent() 
{
 const someExpression = ....;
 return <SomeComponent someEvent={() => someExpression ? true : false} />
}

测试代码：

const wrapper = enzyme.shallow(<SomeParentComponent/>);
wrapper.find(SomeComponent).simulate('someEvent');
// TODO: 验证someEvent处理程序的返回值

你希望找到比wrapper.find(SomeComponent).instance().props().someEvent()更优的实现方式。

解决方案 #

1. 提取事件处理逻辑为独立可测试函数

将内联的回调逻辑抽离成单独的函数，直接测试这个函数本身，完全脱离组件依赖，这是最推荐的方案：

组件代码改造：

// 单独导出处理函数
export const handleSomeEvent = (condition) => condition ? true : false;

function SomeParentComponent() 
{
 const someExpression = ....;
 // 组件中调用抽离后的函数
 return <SomeComponent someEvent={() => handleSomeEvent(someExpression)} />
}

测试代码：

import { handleSomeEvent } from './your-component-file';

test('handleSomeEvent返回正确结果', () => {
  expect(handleSomeEvent(true)).toBe(true);
  expect(handleSomeEvent(false)).toBe(false);
});

优点：测试逻辑与组件完全解耦，代码更清晰，维护成本更低，不需要依赖Enzyme的组件操作。

2. 直接通过props()方法获取并调用回调

对于无法抽离逻辑的场景，使用Enzyme ShallowWrapper的props()方法直接获取回调函数，比instance().props()更通用（函数组件没有实例，instance()会返回null，导致报错）：

测试代码：

const wrapper = enzyme.shallow(<SomeParentComponent/>);
// 直接获取props中的回调
const someEventCallback = wrapper.find(SomeComponent).props().someEvent;
// 调用并断言返回值
expect(someEventCallback()).toBe(true); // 根据实际预期值调整

3. 控制依赖变量验证回调行为

如果someExpression依赖外部值（如工具函数、hook返回值），可以通过Mock控制该变量的取值，进而验证回调的返回结果：

示例（假设someExpression来自工具函数）：

import { getSomeExpressionValue } from './utils';

// Mock工具函数
jest.mock('./utils');

test('someEvent根据someExpression返回正确结果', () => {
  // 模拟someExpression为true的情况
  getSomeExpressionValue.mockReturnValue(true);
  const wrapper = enzyme.shallow(<SomeParentComponent/>);
  const callback = wrapper.find(SomeComponent).props().someEvent;
  expect(callback()).toBe(true);

  // 模拟someExpression为false的情况
  getSomeExpressionValue.mockReturnValue(false);
  expect(callback()).toBe(false);
});

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