![](/img/trans.png)
[英]Why 'this' is undefined for child component, when click is passed from a parent component?
[英]How test callback click in child component that was passed from parent component?
我有以下父组件:
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}
问题来自onClick
方法的声明,如果您这样声明函数
onClick() {}
代替
onClick = () => {}
您的测试应该可以进行,因为onClick
将出现在Parent.prototype
对象中,请注意, onClick
方法中的this
关键字将不再引用类实例。
如果您需要使用箭头功能(以获取this
的正确值),则可以修改测试:
test("check callback fire", () => {
let mockFn = jest.fn();
let wrapper = shallow(<Parent />);
wrapper.instance().onClick = mockFn;
wrapper.find('Child').props().handleClick();
expect(mockFn).toHaveBeenCalled();
});
在Parent
类中使用onClick = () => {}
不会将属性添加到Parent.prototype
,实际上,它将声明一个实例变量,如下所示:
class Parent {
constructor() {
super();
this.onClick = () => {}
}
}
顺便说一句,您的render
方法中存在Fragment
似乎没有用,您可以将其删除
render() {
return <Child handleClick={this.onClick} />;
}
我建议通过两个测试来做到这一点:
onClick
道具的Child
组件的单元测试。 Parent
级进行单元测试,以使其在渲染时正确设置其Child
的onClick
道具。 通过这两个测试,如果其中任何一个失败,您都会收到警报。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.