在测试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();
});
"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)"
]
},
最后是错误屏幕截图