jestjs - Jest + enzyme 测试 : how to ensure a certain function is passed as prop to a component

Question

我正在测试一个包含多个嵌套组件的 React 组件。我的测试旨在确保每个组件都有正确的 Prop 。这些组件之一应该传递一个 onChange 功能 ，所以我尝试执行以下操作(在 test() 内):

Jest + enzyme 测试:

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

const component = shallow(<MyComponent {...props} />);

expect(component.find('SomeNestedComponent')
  .prop('onSomethingChange')).toBe(props.onSomethingChange);

测试失败并显示以下内容(注意:我也试过 .toEqual ):

Expected value to equal:
  [Function mockConstructor]
Received:
  [Function anonymous]

我的组件的定义如下:

我的组件

class MyComponent extends Component {
  onSomethingChange = (event) => {
    // do something
  }

  render() {
    return (
      <div>
        <Header />
        <SomeNestedComponent onSomethingChange={this.onSomethingChange} />
        <Footer />
      </div>
    );
  }
}

如何确保将正确的函数作为 prop(而不是任何其他函数)传递？请注意，我不会随时调用该函数；我只是定义它。

Answer 1

我发现问题中的构造有什么问题。问题是 onSomethingChange函数是 组件实例方法而不是 MyComponent 的 Prop 组件本身。所以onSomethingChange Prop 在SomeNestedComponent指的是onSomethingChange MyComponent 中的方法(因此不等于它在测试中设置的 Prop )。解决方法是简单地比较 SomeNestedComponent的 Prop 到 MyComponent的 实例方法 如下:

expect(component.find('SomeNestedComponent')
  .prop('onSomethingChange')).toBe(component.instance().onSomethingChange);

实例() function 将允许您获得组件中可用的所有功能。