我有一个无状态组件:
export default function TripReportFooter(props) {
const { tripReport, user, toggleFavorite, navigation } = props;
handleShare = async slug => {
try {
const result = await Share.share({
message: `Check out this Trip Report:\n/p/${slug}/`
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
}
} catch (error) {
alert(error.message);
}
};
handleFavorite = async id => {
const token = await AsyncStorage.getItem("token");
toggleFavorite(id, token);
};
return (
... // handleFavorite and handleShare called with TouchableOpacities.
);
}
它内部有两个函数,handleShare
和handleFavorite
。我想测试这些函数的调用,以及 handleFavorite
调用 prop 函数切换收藏夹。
我尝试了wrapper.instance().handleFavorite()
,但由于它是无状态组件,因此它返回null
。
接下来 Stack Overflow 上有人建议使用这样的 spy :
wrapper = shallow(<TripReportFooter {...props} handleFavorite={press} />);
wrapper
.find("TouchableOpacity")
.at(0)
.simulate("press");
expect(press.called).to.equal(true);
但这返回了
'TypeError: Cannot read property 'equal' of undefined'.
调用这些函数的正确方法是什么?
最佳答案
您首先需要考虑要测试什么。是实现细节还是与组件的交互?后者是一个更好的心态和立场,所以我要做的是从交互的角度测试组件。
我会(对于handleShare
):
- 模拟在共享函数内调用的共享对象方法;
- 选择我想要点击/触摸的按钮
- 点击/触摸按钮
- 断言这些方法已被调用。
现在介绍handleFavorite
:
- 模拟
AsyncStorage.getItem
; - 创建一个假的
toggleFavorite
函数,我将其作为 props 传递; - 选择我想要点击/触摸的按钮
- 点击/触摸按钮
- 断言我的
toggleFavorite
函数已被调用
如果您想单独测试这些函数,您必须将它们提取到组件的外部并单独测试它们。但我不建议这样做,因为它不干净并且需要额外的工作。
希望对您有帮助!
关于reactjs - 使用 Enzyme 测试无状态 React 组件内的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55189450/