Jest测试：子组件点击未触发父组件parentClick函数如何解决？

我看了你的测试代码，发现导致mock函数没被调用的原因主要有两个小问题，咱们一步步来修正：

1. 变量名冲突导致组件实例错误 #

你在测试里写了：

const Child = enzyme.mount(<Child {...props} />);

这里左边的Child变量直接覆盖了原本导入的Child组件类，后续你操作的其实是这个mount后的实例变量，而不是正确引用组件。咱们把实例变量名改成别的，比如childComponent就好。

2. 对象字面量的语法错误 #

定义props的时候，你在jest.fn()后面加了分号：

const props = { parentClick: jest.fn(); }

对象属性之间应该用逗号分隔（最后一个属性可以省略逗号），这里的分号会导致语法错误，改成逗号或者直接去掉就行。

修正后的完整测试代码 #

it("button click fires", () => {
  // 修正语法错误，去掉分号
  const props = { parentClick: jest.fn() };
  // 避免变量名冲突，改用childComponent
  const childComponent = enzyme.mount(<Child {...props} />);
  childComponent.find('button').simulate('click');
  expect(props.parentClick).toHaveBeenCalled();
});

额外检查点（如果还是失败的话） #

• 确保你已经正确配置了Enzyme的适配器，比如在测试文件顶部或者setup文件里添加：

  import Enzyme from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16'; // 对应你的React版本
  
  Enzyme.configure({ adapter: new Adapter() });
  

• 确认组件里的handleClick箭头函数绑定正确（你的组件代码这部分是没问题的，箭头函数已经自动绑定了this）。

这样修改之后，测试应该就能正常触发parentClick并通过验证了。

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