我有以下父组件:
import React, { Fragment } from 'react';
export class Parent extends Component {
constructor(props) {
super(props);
this.state = {
show: false,
};
}
onClick = () => {
// working
}
render() {
return (
<Fragment>
<Child handleClick={this.onClick} />
</Fragment>
);
}
}
我需要检查回调是否在子组件中触发,onClick 方法是否将在父组件中触发。
我写了这样一个测试:
test("check callback fire", () => {
let mockFn = jest.fn();
Parent.prototype.onClick = mockFn;
let wrapper = shallow(<Parent />);
wrapper.find('Child').props().handleClick();
expect(mockFn).toHaveBeenCalled();
});
我收到一个错误
Expected mock function to have been called, but it was not called.
我怎样才能用笑话和酶正确地做到这一点?是否可以?
您的 onClick 函数位于对象本身,而不是原型。您必须修改对象实例。
let mockFn = jest.fn();
let wrapper = shallow(<Parent />);
wrapper.find('Child').props().handleClick = mockFn;
wrapper.find('Child').props().handleClick();
expect(mockFn).toHaveBeenCalled();
话虽如此,您自己正在调用 onClick,因此测试它是否被调用是没有意义的。
你应该测试它的效果,例如,部分 DOM 没有显示。
您还可以测试它们组件的状态更新是否正确,即 {show: false}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)