使用Jest测试React Native时的Jest错误

Question

我在测试React Native应用程序的组件时遇到Jest问题。 其他几个组件已经按照期望的相同配置通过了测试，但是这个组件抛出了奇怪的错误，因此请在这里寻求帮助。

登录组件

import React, { Component, Fragment } from "react";
import { func } from "prop-types";
import { View, Text } from "react-native";
import { TextInput, Button } from "react-native-paper";

import { STYLE_CONSTANTS } from "../../config/styles";
import styles from "./styles";
import { loginScreenText } from "./helpers";

class SignIn extends Component {
  state = {
    isLoading: false
  };

  render() {
    const { isLoading } = this.state;
    const { showAppAction } = this.props;
    return (
      <Fragment>
        <View style={styles.signInContainer}>
          <Text style={styles.oAuthHeading}>
            {loginScreenText.oAuthHeading}
          </Text>
          <View style={styles.spacer} />
          <Button
            icon={require("../../assets/images/facebook.png")}
            mode="contained"
            loading={isLoading}
            color={STYLE_CONSTANTS.COLORS.FACEBOOK}
            style={styles.facebookButton}
            onPress={() => showAppAction()}
          >
            {loginScreenText.facebookButton}
          </Button>
          <View style={styles.spacer} />
          <Button
            icon={require("../../assets/images/google.png")}
            mode="contained"
            loading={isLoading}
            color={STYLE_CONSTANTS.COLORS.GOOGLE}
            style={styles.googleButton}
            onPress={() => showAppAction()}
          >
            {loginScreenText.googleButton}
          </Button>
        </View>
      </Fragment>
    );
  }
}

SignIn.propTypes = {
  showAppAction: func
};

export default SignIn;

登录测试文件

import "react-native";
import React from "react";
import ShallowRenderer from "react-test-renderer/shallow";

import SignIn from "../containers/SignIn";

test('renders SignIn component correctly', () => {
  const renderer = new ShallowRenderer();
  renderer.render(<SignIn showAppAction={jest.fn()} />);
  const wrapper = renderer.getRenderOutput();
  expect(wrapper).toMatchSnapshot();
});

package.json中的Jest配置

"jest": {
  "preset": "react-native",
  "collectCoverage": true,
  "coverageDirectory": "__coverage__",
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
  },
  "transformIgnorePatterns": [
    "node_modules/(?!react-native|native-base|react-navigation|react-native-fabric|react-native-paper)"
  ]
},

最后的错误截图

Answer 1

通过遵循此处的讨论，我能够解决此问题