typescript - 使用 Jest 和 reactnative-testing-library 在 ReactNative 中测试渲染：您正在尝试在 Jest 环境被拆除后“导入”一个文件

Question

当我尝试使用 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,
  },
});

标签： typescriptreact-nativejestjsexporeact-native-testing-library