0

I have a SignUp.js Component used to sign up users to my app. It is inspired/copied from this tutorial and is based on react-native-firebase starter kit.

// 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>

The handleSignUp() method is called via onPress event when user submits the form. I am trying to test this method to expect an error when the user submits the form with a bad email. This is my test:

// 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();

})

My test fails and I have the error

TypeError: _reactNativeFirebase2.default.auth is not a function

Could you please guide me to a solution as Im new to react native and unit tests ?

skyboyer
  • 22,209
  • 7
  • 57
  • 64
nader
  • 49
  • 9

1 Answers1

0

In your SignUp.test.js

Include this at the top of your file

import '@firebase/firestore'

so it looks like this

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'
maxadorable
  • 1,290
  • 1
  • 10
  • 24