如何为依赖在子组件更新的React useEffect编写Jest-enzyme测试用例

问题根因 #

• 你的测试逻辑本身存在问题：你仅mock了useState返回amenities的初始值和setAmenitiesSpy，但全程没有触发任何调用setAmenities的操作，spy自然不会被触发，所以收到调用次数为0的报错。
• 你使用了shallow浅渲染父组件，子组件MoreFiltersComponent不会被真实渲染，因此无法直接在父组件的测试用例中找到子组件内的checkbox元素触发交互。

方案1：直接调用子组件传入的setAmenities（单元测试推荐） #

如果仅需要测试父组件的过滤逻辑，不需要关心子组件的内部实现，可以直接拿到传给子组件的setAmenities属性主动调用，触发状态更新即可：

const setAmenitiesSpy = jest.fn();
const mockUseEffect = () => {
  useEffect.mockImplementation((f) => f());
};

it('should run amenities filter logic when amenities are selected', () => {
  // 第一个useState是priceRange，第二个才是amenities，注意mock顺序
  useStateSpy.mockImplementationOnce(() => [{}, jest.fn()]) // mock priceRange
    .mockImplementationOnce(() => [[], setAmenitiesSpy]); // mock amenities

  renderedModule = shallow(<FilterComponent {...props} />);
  mockUseEffect();

  // 拿到传给子组件的setAmenities方法，主动调用传值
  const moreFiltersProps = renderedModule.find('MoreFiltersComponent').props();
  moreFiltersProps.setAmenities(["ac", "tv", "wifi"]);

  // 验证状态更新，且useEffect里的过滤逻辑被执行
  expect(setAmenitiesSpy).toHaveBeenCalledWith(["ac", "tv", "wifi"]);
  expect(renderedModule).toMatchSnapshot();
});

这种方式不需要渲染子组件，仅验证父组件的状态更新和过滤逻辑，执行速度更快，符合单元测试的职责边界。

方案2：使用全量渲染模拟真实交互（集成测试推荐） #

如果要模拟用户真实操作的完整流程，把shallow替换为enzyme的mount全量渲染，就可以找到子组件内的checkbox元素触发change事件：

import { mount } from 'enzyme';

it('should run amenities filter logic when user selects amenities checkbox', () => {
  const event = {
    target: { checked: true, value: 'ac' }
  };
  renderedModule = mount(<FilterComponent {...props} />);
  
  // 直接找到子组件内的checkbox触发change
  renderedModule.find('#ac').simulate('change', event);
  
  // 验证过滤逻辑执行结果
  expect(renderedModule).toMatchSnapshot();
});

这种方式更贴近真实用户操作路径，可以同时验证父子组件的交互逻辑是否正常。

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