React组件Jest/Enzyme测试中Mock函数未被调用问题

嘿，我来帮你排查这个问题！这种情况我之前也碰到过几次，大概率是和AntD Select的事件逻辑或者Enzyme浅渲染的特性有关，咱们一步步来拆解：

首先，先搞清楚AntD Select事件的触发时机（最容易踩坑的点！） #

AntD的Select组件里，onSearch和onChange的触发逻辑是不一样的：

• onSearch：用户在输入框中输入文本时就会触发，不管有没有选中下拉选项
• onChange：只有当用户从下拉列表中选中某个选项时才会触发，单纯输入文本不会触发它

如果你以为输入文本会同时触发两个事件，那这就是mock函数没被调用的核心原因！

接下来，针对浅渲染的限制调整测试方式 #

Enzyme的shallow渲染只会渲染组件本身，不会解析子组件的内部结构。而AntD的Select是封装过的复杂组件，它的输入框是内部子组件，浅渲染下直接模拟输入可能没法把事件传递到你绑定的props上。你可以试试这两种方案：

方案1：用mount替代shallow

mount会渲染完整的组件树，能正确触发AntD组件内部的事件：

import { mount } from 'enzyme';

it('triggers both action creators correctly', () => {
  const mockOnChange = jest.fn();
  const mockOnSearch = jest.fn();
  
  const wrapper = mount(
    <YourComponent onChangeAction={mockOnChange} onSearchAction={mockOnSearch} />
  );

  // 触发onSearch：模拟输入文本
  wrapper.find('Select').prop('onSearch')('test keyword');
  expect(mockOnSearch).toHaveBeenCalledWith('test keyword');

  // 触发onChange：模拟选中一个选项
  wrapper.find('Select').prop('onChange')('selected-option-value');
  expect(mockOnChange).toHaveBeenCalledWith('selected-option-value');
});

方案2：用shallow+dive()深入渲染Select

如果不想用mount，可以用dive()方法深入一层渲染Select组件，访问它的内部输入元素：

import { shallow } from 'enzyme';

it('triggers onSearch via shallow render', () => {
  const mockOnSearch = jest.fn();
  
  const wrapper = shallow(
    <YourComponent onSearchAction={mockOnSearch} />
  );

  // 深入到Select内部，找到输入框并触发输入事件
  wrapper.find('Select').dive().find('input').simulate('change', { target: { value: 'test' } });
  expect(mockOnSearch).toHaveBeenCalledWith('test');
});

最后，检查mock函数的绑定和断言是否正确 #

• 确认组件里确实把mock函数传给了Select对应的props，比如onChange={props.onChangeAction}、onSearch={props.onSearchAction}，有没有写错属性名？
• 断言时要注意参数类型是否匹配，比如AntD的onChange传递的是选项的value值，不是输入的文本，别搞混了！

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