Question

我正在测试一个React组件，里面有几个嵌套组件。我的测试旨在确保每个组件都有合适的道具。其中一个组件应该通过onChange 函数，所以我尝试执行以下操作（在test()内）：

Jest + Enzyme Test：

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组件本身的支柱。因此onSomethingChange中的SomeNestedComponent道具指的是onSomethingChange中的MyComponent道具（因此不等于其在测试中设置的道具）。修复方法是简单地将SomeNestedComponent的道具与MyComponent的实例方法进行比较，如下所示：

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

instance（）函数将允许您获取组件中的所有可用功能。

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

1 个答案: