当我尝试使用 EXPO 在我的 ReactNative 应用程序中测试渲染方法时遇到问题,我正在使用 JEST 和 reactnative-testing-library。这是我的代码:
import { render, fireEvent, cleanup, wait } from '@testing-library/react-native';
import { LoginScreen } from '../../App/screens/LoginScreen';
import '@testing-library/jest-native/extend-expect';
import { View } from "react-native";
const fakeNavigation = {
navigation: {} as any
}
it("renders correctly", () => {
const screen = render(<LoginScreen {...fakeNavigation}>{() => <View />}</LoginScreen>);});
在写这个问题之前,我看了这个链接 Reference error: `import` a file after the Jest environment has been torn down and also tried workaround
jest.useFakeTimers()
但没有任何效果。正如评论中所建议的,我附上了 LoginScreen 代码的组件
import React, { Component, Fragment, useContext } from "react";
import {
TouchableOpacity,
Dimensions,
Text,
Image,
View,
StyleSheet,
ScrollView,
Platform,
} from "react-native";
import { Formik } from "formik";
import * as Yup from "yup";
import CustomIcon from "../icon-font";
import Fonts from "../constants/Fonts";
import Colors from "../constants/Colors";
import LoginForm from "../forms/LoginForm";
import { UserContext } from "../contexts/UserContext";
type LoginScreenProps = {
navigation: any;
};
const LoginScreen: React.FC<LoginScreenProps> = (props) => {
const { _fetchLogin, logOut, user } = useContext(UserContext);
const loginSchema = Yup.object().shape({
username: Yup.string().email().required("Please enter a correct email"),
password: Yup.string().required("Please enter a correct password"),
});
let handleLogOut = (user: any) => {
logOut(user);
props.navigation.goBack();
};
return (
<ScrollView
style={{
flex: 1,
backgroundColor: Colors.primaryDark,
}}
>
<View>
<TouchableOpacity
style={{
marginTop: Platform.OS === "ios" ? 52 : 32,
marginLeft: 16,
zIndex: 5,
position: "relative",
}}
onPress={() => props.navigation.goBack()}
>
<View>
<CustomIcon
name="angle-left"
size={32}
color="white"
style={{
width: 48,
height: 48,
backgroundColor: "transparent",
}}
/>
</View>
</TouchableOpacity>
<View
style={{
justifyContent: "center",
alignItems: "center",
zIndex: 1,
position: "relative",
}}
>
<Image
style={{
width: 150,
height: 150,
marginTop: -72,
marginBottom: 48,
zIndex: 1,
}}
source={require("../../assets/images/logSignIn.png")}
/>
<View
style={{
width: 300,
height: 300,
borderColor: Colors.white,
borderWidth: 1,
borderRadius: 300,
zIndex: 1,
position: "absolute",
top: -150,
opacity: 0.1,
}}
/>
<View
style={{
width: 500,
height: 500,
borderColor: Colors.white,
borderWidth: 1,
borderRadius: 600,
zIndex: 1,
position: "absolute",
top: -250,
opacity: 0.1,
}}
/>
{!user.logged ? (
<View style={{ paddingBottom: 600, zIndex: 2 }}>
<Formik
validationSchema={loginSchema}
initialValues={{
username: "",
password: "",
}}
onSubmit={async (values, actions) => {
await _fetchLogin(values);
actions.setSubmitting(false);
}}
>
<LoginForm {...props} />
</Formik>
</View>
) : (
<View
style={{
width: 500,
height: 500,
}}
>
<Image
style={{
width: 500,
height: 500,
top: -100,
left: -5,
position: "absolute",
zIndex: -3,
}}
source={require("../../assets/images/signUp.gif")}
/>
<TouchableOpacity
style={{
alignItems: "center",
zIndex: 2,
position: "relative",
}}
onPress={() => props.navigation.navigate("HomeNavigator")}
>
<View style={styles.submit}>
<Text style={styles.textInfo}> Go to homepage </Text>
</View>
</TouchableOpacity>
</View>
)}
</View>
</View>
</ScrollView>
);
};
export default LoginScreen;
const styles = StyleSheet.create({
submit: {
borderRadius: 32,
padding: 16,
backgroundColor: Colors.tertiary,
flexDirection: "row",
alignSelf: "center",
marginTop: 184,
paddingLeft: 32,
paddingRight: 32,
height: 48,
},
textInfo: {
fontSize: 16,
fontFamily: Fonts.primary,
color: Colors.white,
},
});