我正在测试一个包含多个嵌套组件的 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(而不是任何其他函数)传递?请注意,我不会随时调用该函数;我只是定义它。
最佳答案
我发现问题中的构造有什么问题。问题是 onSomethingChange
函数是 组件实例方法而不是 MyComponent
的 Prop 组件本身。所以onSomethingChange
Prop 在SomeNestedComponent
指的是onSomethingChange
MyComponent
中的方法(因此不等于它在测试中设置的 Prop )。解决方法是简单地比较 SomeNestedComponent
的 Prop 到 MyComponent
的 实例方法 如下:
expect(component.find('SomeNestedComponent')
.prop('onSomethingChange')).toBe(component.instance().onSomethingChange);
实例() function 将允许您获得组件中可用的所有功能。
关于jestjs - Jest + enzyme 测试 : how to ensure a certain function is passed as prop to a component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42707259/