Error: reactNativeFirebase2.default.auth is not a function

Question

我有一个 SignUp.js 组件用于将用户注册到我的应用程序。从this tutorial and is based on react-native-firebase starter kit.

是inspired/copied

// SignUp.js
import React from 'react';
import { StyleSheet, Text, TextInput, View, Image, TouchableOpacity } from 'react-native';
import firebase from 'react-native-firebase';

export default class SignUp extends React.Component {
  state = {
    fullName: '',
    email: '',
    password: '',
    errorMessage: null
  }

  handleSignUp = () => {

    const { email, password, fullName } = this.state,
    firebase
    .auth()
    .createUserWithEmailAndPassword(this.state.email, this.state.password)
    .then(
      (user) => {
        if (user) {

          user.updateProfile({
            displayName: this.state.fullName,
            photoURL: "../../assets/img/user.png"
          });
        }
    }).then(() => this.props.navigation.navigate('Main'))
    .catch(error => this.setState({ errorMessage: error.message }))
}

...

 <View style={styles.buttons}>
      <TouchableOpacity onPress={this.handleSignUp}>
        <Text style={styles.buttonText}>Sign Up</Text>
      </TouchableOpacity>
 </View>

当用户提交表单时，通过 onPress 事件调用 handleSignUp() 方法。 我正在尝试测试此方法，以便在用户提交带有错误电子邮件的表单时出现错误。这是我的测试：

// SignUp.test.js
import { shallow } from 'enzyme';
import React from 'react';
import { TouchableOpacity } from 'react-native';
import SignUp from '../../components/SignUp';
import renderer from 'react-test-renderer';

it('should render error if user submits a bad email', () => {
  const wrapper = shallow(<SignUp />);

  wrapper.instance().handleFullNameText('John Smith');
  wrapper.instance().handleEmailText('john.smith@'); // <- notice bad email
  wrapper.instance().handlePasswordText('123456');

  wrapper.find(TouchableOpacity).first().props().onPress();

})

我的测试失败了，我有错误

TypeError: _reactNativeFirebase2.default.auth is not a function

我是 React 原生测试和单元测试的新手，能否请您指导我找到解决方案？

Answer 1

在你的SignUp.test.js

将其包含在文件的顶部

import '@firebase/firestore'

看起来像这样

import { shallow } from 'enzyme';
import React from 'react';
import { TouchableOpacity } from 'react-native';
import SignUp from '../../components/SignUp';
import renderer from 'react-test-renderer';
import '@firebase/firestore'

Error: reactNativeFirebase2.default.auth is not a function

Error: reactNativeFirebase2.default.auth is not a function

firebase

jestjs

react-native

enzyme

react-native-firebase