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

Question

我正在测试一个包含多个嵌套组件的 React 组件。我的测试旨在确保为每个组件提供正确的道具。其中一个组件应该传递给 onChange function，所以我尝试执行以下操作（在 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]

我的组件定义如下：

我的组件

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

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

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

Answer 1

我发现问题中的构造有什么问题。问题是 onSomethingChange 函数是一个 组件实例方法 而不是 MyComponent 组件本身的 prop。因此 SomeNestedComponent 中的 onSomethingChange prop 指的是 MyComponent 中的 onSomethingChange 方法（因此不等于其在测试中设置的 prop）。修复方法是简单地将 SomeNestedComponent 的属性与 MyComponent 的 实例方法 进行比较，如下所示：

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

instance() 函数将允许您获取组件中可用的所有函数。

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

Jest + Enzyme test: how to ensure a certain function is passed as prop to a component

jestjs

enzyme