如何使用Jest和Enzyme模拟React无状态柯里化函数

我来帮你搞定这个柯里化函数的测试问题～咱们的核心目标是验证当<Row>被点击时，onSelectFeedProvider是否以正确的参数被调用，毕竟组件里的handleSelectFeedProvider是个嵌套的柯里化函数，得顺着它的逻辑来模拟。

完整的测试代码实现 #

import React from 'react';
import { shallow } from 'enzyme';
import Row from 'components/Common/Row';
import Providers from './index';

// 把Row模拟成能传递onClick的组件，而非简单字符串（方便后续触发回调）
jest.mock('components/Common/Row', () => jest.fn(({ onClick }) => <div onClick={onClick} />));

describe('Providers Component', () => {
  let onSelectFeedProviderSpy;
  let wrapper;

  beforeEach(() => {
    // 初始化Jest mock函数，用来追踪调用情况
    onSelectFeedProviderSpy = jest.fn();
    // 浅渲染Providers组件，传入mock回调
    wrapper = shallow(<Providers onSelectFeedProvider={onSelectFeedProviderSpy} />);
  });

  afterEach(() => {
    // 每次测试后清空mock调用记录，避免干扰后续测试
    jest.clearAllMocks();
  });

  it('triggers onSelectFeedProvider with correct value when Row is clicked', () => {
    // 找到渲染后的Row组件实例
    const rowComponent = wrapper.find(Row);
    // 模拟点击事件：先获取Row的onClick属性（柯里化后返回的内层函数），再传入模拟的event
    const mockEvent = { preventDefault: jest.fn() };
    rowComponent.props().onClick(mockEvent);

    // 验证event的preventDefault方法被正确调用
    expect(mockEvent.preventDefault).toHaveBeenCalled();
    // 验证最终回调拿到了预期的参数
    expect(onSelectFeedProviderSpy).toHaveBeenCalledWith({ target: { value: 1 } });
  });
});

关键细节解释 #

1. 正确模拟Row组件：
   你之前用jest.mock返回'Row'的话，shallow渲染后无法获取组件的props，自然没法触发点击事件。改成返回带onClick的div，就能保留回调传递，方便后续触发逻辑。

2. 处理柯里化函数：
   组件里的handleSelectFeedProvider(1)会返回一个接受e的内层函数，这个函数才是实际绑定在Row上的onClick。我们需要先拿到这个内层函数，再传入模拟的event对象，才能完整触发整个逻辑链。

3. 双重验证逻辑：
   既要确认e.preventDefault()被调用（对应组件内的逻辑），也要确认最终的onSelectFeedProvider拿到了预期参数{ target: { value: 1 } }，这样测试覆盖才够完整。

避坑提醒 #

• 别直接调用handleSelectFeedProvider本身，要通过组件的props.onClick触发，这样才符合组件实际执行流程，测试结果更准确。
• 每次测试后清空mock调用记录，避免上一次的测试数据干扰后续断言。

内容的提问来源于stack exchange，提问作者Albert Olivé Corbella