首页 文章

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

提问于
浏览 次
1

我正在测试一个React组件，里面有几个嵌套组件 . 我的测试旨在确保每个组件都有合适的道具 . 其中一个组件应该传递onChange function ，所以我尝试执行以下操作（在 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（而不仅仅是任何其他函数）传递？请注意，我不会随时调用该函数;我只是定义它 .

jestjs enzyme

1 回答

  • 7

    我发现问题中的构造有什么问题 . 问题是 onSomethingChange 函数是 component instance method 而不是 MyComponent 组件本身的支柱 . 所以 SomeNestedComponent 中的 onSomethingChange prop指的是 MyComponent 中的 onSomethingChange 方法（因此不等于它在测试中设置的道具） . 解决方法是简单地将 SomeNestedComponent 的道具与 MyComponent 的 instance method 进行比较，如下所示：

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

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

    回复于

相关问题