我正在用TypeScript构建一个React Native应用程序。我正在使用Jest和Enzyme进行组件测试。我也在使用React Navigation
In my last question Brian向我介绍了如何正确测试按钮的按下情况。我的问题是按钮onPress
属性可能未定义。让我向您展示代码:
export class HomeScreen extends Component<Props, object> {
// ... navigationOptions and stuff
handlePress = () => {
this.props.navigation.navigate("QuestionsScreen");
};
render() {
return (
<View style={styles.container}>
<Button
raised={true}
title={strings.painButtonTitle}
buttonStyle={styles.painButton}
titleStyle={styles.title}
onPress={this.handlePress}
/>
</View>
);
}
}
这是我编写的用于测试与按钮的交互的测试:
describe("interaction", () => {
const props = createTestProps({});
const wrapper = shallow<HomeScreen>(<HomeScreen {...props} />);
describe("clicking the Pain Button", () => {
it("should navigate to the 'QuestionsScreen'", () => {
wrapper.instance().handlePress = jest.fn();
wrapper.find(Button).prop("onPress")({} as any);
expect(wrapper.instance().handlePress).toHaveBeenCalledTimes(1);
});
});
});
问题出在这里,我的测试无法运行,因为短绒棉绒说onPress
可能未定义:
Cannot invoke an object which is possibly 'undefined'.
我该如何解决?
我尝试将代码包装在如下if语句中:
if (typeof wrapper.find(Button).prop("onPress") !== undefined) {
wrapper.find(Button).prop("onPress")({} as any);
}
但这也不起作用。
答案 0 :(得分:1)
您可以像这样使用non-null assertion operator:
wrapper.find(Button).prop("onPress")!({} as any);
...或将处理程序分配给一个变量,然后像这样在警卫后面调用它:
const handler = wrapper.find(Button).prop("onPress");
if (handler) {
handler({} as any);
}