如何测试处理React有状态组件状态的箭头函数

我来帮你梳理下测试失败的原因，以及如何正确编写这个测试用例：

问题分析 #

你的测试用例有两个核心问题：

1. 未正确设置sortBy状态：
   你的onMovieFindHandler会根据this.state.sortBy.sortByTitle的值决定是按标题还是类型过滤。但测试中你没有初始化sortBy的状态，组件默认的sortBy可能是{sortByTitle: false}，这时候会执行genre过滤逻辑——而"Fifty"显然不在任何电影的genre里，所以过滤后结果还是全部6条数据，导致最后一个断言失败。

2. 忽略了setState的异步特性：
   React的setState是异步操作，你调用instance.onMovieFindHandler()后直接断言状态，此时状态可能还没完成更新，也会导致断言不准确。

另外你创建了movieHandlerMock但没有在组件中使用，这个可以删掉或者根据需要调整。

修复后的测试用例 #

下面是修正后的完整测试代码：

it('component should filter movies by search query', () => {
  // 初始化组件时，手动设置内部状态指定按标题过滤
  const wrapper = shallow(<MovieFinder searchQuery="Fifty" />);
  wrapper.setState({ sortBy: { sortByTitle: true } });
  
  const instance = wrapper.instance();
  
  // 初始状态断言：未过滤时是6条
  expect(instance.state.movies.length).toEqual(6);
  
  // 调用过滤函数
  instance.onMovieFindHandler();
  
  // 强制更新组件，确保异步setState完成
  wrapper.update();
  
  // 断言过滤后的结果数量
  expect(instance.state.movies.length).toEqual(1);
});

额外优化建议 #

如果你想测试子组件SearchPanel触发searchHandler的真实场景，那可以用mock函数来验证交互逻辑：

it('should trigger search handler and filter movies when SearchPanel calls it', () => {
  const wrapper = shallow(<MovieFinder searchQuery="Fifty" />);
  wrapper.setState({ sortBy: { sortByTitle: true } });
  
  // 获取子组件的searchHandler并模拟调用
  wrapper.find(SearchPanel).prop('searchHandler')();
  
  // 强制更新后断言状态变化
  wrapper.update();
  expect(wrapper.instance().state.movies.length).toEqual(1);
});

内容的提问来源于stack exchange，提问作者D.Mark