Jest + Enzyme测试:如何确保某个函数作为prop传递给组件

Question

我正在测试一个React组件,里面有几个嵌套组件.我的测试旨在确保每个组件都有合适的道具.其中一个组件应该传递onChange 函数,所以我尝试执行以下操作(内部test()):

Jest +酶测试:

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]

我的组件的定义如下:

为MyComponent

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

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

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

Answer 1

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

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

该实例()函数将允许您把所有的组件中提供的功能.