Jest+Enzyme测试React组件onClick失败，mock调用次数为0如何解决？

你的Accordion组件中，data-testid为arrow的p标签绑定的点击事件只执行了内部的togglePanel方法，该方法没有调用外部传入的props.onClick，所以测试中的mock函数不会被触发，调用次数始终为0。

根据你的测试目的二选一即可： #

方案1：业务需要点击箭头触发外部onClick #

修改组件内的togglePanel方法，加上外部onClick的调用逻辑：

const togglePanel = () => {
  setOpened(!opened)
  // 新增：如果外部传入了onClick就执行
  props.onClick?.()
}

修改后原来的测试代码即可正常运行，你也可以把断言改成更直观的写法：

test("onClick calls props.onClick", () => {
    nodes.simulate("click");
    expect(onClickMock).toHaveBeenCalledTimes(1);
});

方案2：仅需要测试点击后组件内部状态切换 #

如果业务逻辑不需要对外暴露点击回调，直接修改测试用例，验证组件展开状态的变化即可，不需要mock onClick：

test("点击箭头切换展开状态", () => {
    // 点击前是收起状态，显示向右箭头
    expect(wrapper.find('IoIosArrowForward').exists()).toBeTruthy()
    nodes.simulate("click");
    // 点击后是展开状态，显示向下箭头
    expect(wrapper.find('IoIosArrowDown').exists()).toBeTruthy()
});

你当前的setup函数中属性合并顺序有问题，defaultProps会覆盖你自定义传入的props，建议调整顺序：

const setup = (props = {}) =>
  // 自定义props放在后面，优先级更高
  shallow(<Accordion {...defaultProps} {...props} />).dive();

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