玩笑错误：未捕获 [TypeError: XXX is not a function]

问题描述

我在 component1 上有一个 onClick，它调用 component2 中的一个钩子，将道具传递给他：

组件 1：

function test(){
    return(
       <div
          onClick=(() => this.props.changeExample(this.props.example)}
       />
}

component2：

changeExample(example){
    ...do some things
}

但是当我尝试使用以下代码测试 component1 的 onClick 事件时：

it("test onClick",() =>{
    let wrapper
     wrapper = shallow <component1 />
     const eventWrapper = wrapper.find("div")
     eventWrapper.simulate("click")
}

我收到以下错误：

错误：未捕获 [TypeError: _this.props.changeExample 不是函数]

解决方法

您需要模拟该道具，然后您可以检查它是否已被调用，例如：

it("test onClick",() => {
  const mockOnClick = jest.fn();
  const wrapper = shallow <component1 changeExample={mockOnClick} />

  const eventWrapper = wrapper.find("div");
  eventWrapper.simulate("click");

  expect(mockOnClick).toHaveBeenCalledTimes(1);
}