title: How to write a Jest Test for Login Screen page
body: <p>I had a login screen which use TWJ ( user token) by call auth API, when user click submit it will store user token and fetch the right data in screens, I'm tried to write the first jest unit test which allow to test the login class to pass with the right email login address, follow are code:</p>
  
  <p>LogIN screen:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { AsyncStorage, StyleSheet, Image, TextInput, Alert } from 'react-native';
  import { Root, Container, Header, Content, Form, Item, Input, Label, View, Button, Text, Icon, Thumbnail, Toast } from 'native-base';
  import { connect } from 'react-redux';
  import { Redirect } from "react-router-dom";
  import {Login} from '../../store';
  import { LOGIN } from '../../store/auth/actions';
  import { renderInputField, fieldOnChange, toastr } from '../../_helpers';
  import Images from '../../Assets/images';
  import { userService } from '../../_services';
  
  class LogIn extends Component {
    constructor(props) {
      super(props)
  
      this.state = {
        showToast: false,
        token: null,
        password: 'root',
        email: 'root@email.com'
      }
      this.handleChange = this.handleChange.bind(this);
      this.handleScreen = this.handleScreen.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(type) {
      return (text) =&gt; this.validate(text, type)
    }
  
    handleScreen(screen) {
      return () =&gt; this.props.navigation.navigate(screen)
    }
  
    // Defind Reg for password : Contain at least 5 characters, at least 1 number, 1 lowercase, 1 uppercase,  only 0-9a-zA-Z
    handlePasswordChange(passwordText) {
      //let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{5,}$/
      let reg = /^[0-9a-zA-Z]{3,}$/
  
      this.setState({ password: passwordText })
      if (reg.test(passwordText) == true &amp;&amp; this.state.password.length &gt; 1) {
        this.setState({ PasswordinputError: false, PasswordinputSuccess: true, })
      } else {
        this.setState({ PasswordinputError: true, PasswordinputSuccess: false, })
      }
    }
  
    handleEmailChange(emailText) {
      let re = /^(([^&lt;&gt;()[\]\\.,;:\s@\"]+(\.[^&lt;&gt;()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  
      this.setState({ email: emailText })
      if (re.test(emailText) == true &amp;&amp; this.state.email.length &gt; 1) {
        this.setState({ EmailinputError: false, EmailinputSuccess: true, EmailError: null })
      } else {
        this.setState({ EmailinputError: true, EmailinputSuccess: false, EmailError: 'Whoops, that email won\'t work' })
      }
    }
  
    handleSubmit( e ) {
      e.preventDefault();
      let utilisateur = {};
      utilisateur.login= this.state.email;
      utilisateur.motdepasse= this.state.password;
  
      //const dispatch = this.props;
  
      userService.login(utilisateur).then(
        userInfo =&gt; {
          //dispatch(this.success(userInfo));
          if(userInfo &amp;&amp; userInfo.idSession){
            this.props.navigation.navigate('DashBoard');
            console.log('user',userInfo);
          }else{
            toastr.showToast('Votre login information pas correct');
          }       
        },
        error =&gt; {
            console.log('error', error);
        }
      );   
    };
  
    //success(user) { return { type: LOGIN, userInfo : user } }
  
    render() {
      return (
        &lt;Root&gt;
          &lt;Container style={Styles.container}&gt;
            &lt;Content&gt;
              &lt;View style={Styles.view}&gt;
                &lt;Image style={Styles.Logo} source={Images.logo} /&gt;
              &lt;/View&gt;
              &lt;Form style={Styles.inputFields} onSubmit={this.handleSubmit}&gt;
                &lt;View&gt;
                  &lt;Item
                    success={this.state.EmailinputSuccess ? true : false}
                    error={this.state.EmailinputError ? true : false}&gt;
                    &lt;Input
                      type="email"
                      placeholder="Email"
                      value={this.state.email}
                      onChangeText={(text) =&gt; this.handleEmailChange(text)} /&gt;
                    &lt;Icon name='checkmark-circle' /&gt;
                  &lt;/Item&gt;
                  &lt;Item
                    success={this.state.PasswordinputSuccess ? true : false}
                    error={this.state.PasswordinputError ? true : false}
                    last&gt;
                    &lt;Input
                      secureTextEntry={true}
                      value={this.state.password}
                      onChangeText={(text) =&gt; this.handlePasswordChange(text)} 
                      placeholder='Password' /&gt;
                    &lt;Icon name='checkmark-circle' /&gt;
                  &lt;/Item&gt;
                &lt;/View&gt;
              &lt;/Form&gt;
              &lt;Button success style={Styles.SignInButton}  onPress={this.handleSubmit} &gt;
                &lt;Text&gt;Me connecter&lt;/Text&gt;
              &lt;/Button&gt;
              &lt;Text onPress={this.handleScreen('ResignPassword')} style={Styles.middleText}&gt;J'ai oubliē mon de passe{"\n"} &lt;/Text&gt;
              &lt;Text style={Styles.middleText}&gt;Vous n'avez pas encore de compte ?  &lt;/Text&gt;
              &lt;Button Primary onPress={this.handleScreen('SignIn')} style={Styles.RegisterButton} &gt;
                &lt;Text&gt;M'inscrire&lt;/Text&gt;
              &lt;/Button&gt;
            &lt;/Content&gt;
          &lt;/Container&gt;
        &lt;/Root&gt;
      );
    }
  }
  
  const Styles = StyleSheet.create({
    container: {
      backgroundColor: '#f2f7f8'
    },
    view: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#f2f7f8'
    },
    Logo: {
      marginTop: 40,
      width: 245,
      flex: 2,
      resizeMode: "contain",
      alignItems: "center",
      alignSelf: "center"
    },
    SignInButton: {
      justifyContent: 'center',
      borderRadius: 5,
      marginLeft: '2%',
      marginRight: '2%',
      marginTop: '7%'
    },
    RegisterButton: {
      marginLeft: '2%',
      marginRight: '2%',
      marginTop: '7%',
      borderRadius: 5,
      justifyContent: 'center',
      backgroundColor: '#3b5998'
    },
    inputFields: {
      marginTop: 120
    },
    middleText: {
      fontSize: 15,
      marginTop: '2%',
      textAlign: 'center'
    }
  })
  
  function mapStateToProp(state){
    const { loggedIn } = state.auth;
      return {
          loggedIn
      };
  }
  function mapDispatchToProp(dispatch){
    return({
      LogIn: ()=&gt;{dispatch(LogIn())}
    })
  }
  
  export default connect(mapStateToProp,mapDispatchToProp)(LogIn);
  </code></pre>
  
  <p><em>tests</em>/ logIn.js</p>
  
  <pre><code>import React from 'react';
  import renderer from 'react-test-renderer';
  import LogIn from '../src/Screens/Authentication';
  
  describe('when valid email was filled', () =&gt; {
    beforeEach(() =&gt; {
      subscribe = jest.fn();
      wrapper = mount(&lt;LogIn subscribe={subscribe}/&gt;);
    });
  
    describe('and when form was submitted', () =&gt; {
      beforeEach(() =&gt; {
        wrapper.find('#email').simulate('change', {target: {name: 'email', value: 'root@email.com'}});
        wrapper.find('#submit').simulate('submit');
      });
  
      it('should subscribe to the news with correct email', () =&gt; {
        expect(subscribe).toHaveBeenCalledWith({email: 'root@email.com'});
      });
    });
  });
  </code></pre>
  
  <p>The problem are I got serveral error:</p>
  
  <pre><code> TypeError: mount is not a function
  
         6 |   beforeEach(() =&gt; {
         7 |     subscribe = jest.fn();
      &gt;  8 |     wrapper = mount(&lt;LogIn subscribe={subscribe}/&gt;);
           |               ^
         9 |   });
        10 |   
        11 |   describe('and when form was submitted', () =&gt; {
  
        at Object.mount (__tests__/LogIn.js:8:15)
  </code></pre>
  
  <pre><code>ReferenceError: wrapper is not defined
  
        11 |   describe('and when form was submitted', () =&gt; {
        12 |     beforeEach(() =&gt; {
      &gt; 13 |       wrapper.find('#email').simulate('change', {target: {name: 'email', value: 'support@cashless.com'}});
           |       ^
        14 |       wrapper.find('#submit').simulate('submit');
        15 |     });
        16 | 
  
  
  </code></pre>
  
  <p>I had defined in package.json as those global amount true:</p>
  
  <pre><code> "globals": {
        "shallow": true,
        "render": true,
        "wrapper": true,
        "mount": true
      },
  </code></pre>
  
  <p>still got the same error, what exactly procedure to resolve it and write a test correctly?</p>
  
  <p>thank you so much</p>