title: How to test conditional rendering in React using Jest? Does the wrapper update on new component render?
body: <p>I have written React code to:</p>
  <ol>
  <li>Authenticate user - enters username &amp; password</li>
  <li>A request is sent to an auth server and a token is received and stored in the Local Storage</li>
  <li>On successfully storing the token, an action is dispatched to change the store state from <code>isLoggedin: false</code> to <code>isLoggedIn:true</code></li>
  <li>On changing the state to <strong>true</strong>, it redirects me to a new component.</li>
  <li>Using jest I am trying to <strong>test only the behavior</strong> of the same functionality</li>
  <li>I am using Moxios to mock the Axios request.</li>
  </ol>
  <p>How do I test using Jest to understand that a new component has been rendered?</p>
  <p>Below is my code:</p>
  <pre><code>// eslint-disable-next-line
  import React, { Component } from 'react';
  import './Form.css';
  import { Redirect } from 'react-router-dom';
  import { store } from '../../store';
  import { LOGIN } from '../../constants/actionTypes';
  import { connect } from 'react-redux';
  import Spiiner from '../Spiiner';
  import { showLoader } from '../../actions';
  import { hideLoader } from '../../actions';
  import axios from 'axios';
  
  interface IProps {
    login: any;
    dispatch: any;
  }
  
  interface IState {
    username: string;
    password: string;
  }
  
  export class Login extends Component&lt;IProps, IState&gt; {
    constructor(props: any) {
      super(props);
  
      this.state = {
        username: '',
        password: '',
      };
    }
  
    componentDidMount() {
      this.storeCollector();
    }
  
    storeCollector() {
      let localStore = localStorage.getItem('login');
      if (localStore) {
        store.dispatch({ type: LOGIN, payload: { isLoggedIn: true } });
      }
    }
  
    handleUsernameChange = (event: any) =&gt; {
      this.setState({
        username: event.target.value,
      });
    };
  
    handlePassword = (event: any) =&gt; {
      this.setState({
        password: event.target.value,
      });
    };
  
     login() {
     // this.props.dispatch(showLoader());
      axios
        .post('https://reqres.in/api/login', {
          email: this.state.username,
          password: this.state.password,
        })
        .then(
          (response) =&gt; {
            console.log(response.data);
        //    this.props.dispatch(hideLoader());
            if (response.status===200) {
              localStorage.setItem(
                'login',
                JSON.stringify({ token: response.data })
              );
              
              store.dispatch({ type: LOGIN, payload: { isLoggedIn: true } });
            } else {
              store.dispatch({ type: LOGIN, payload: { isLoggedIn: false } });
            }
          },
          (error) =&gt; {
            console.log(error);
    //       this.props.dispatch(hideLoader());
          }
        );
     }
  
    render() {
      let loginPage = (
        &lt;div className=&quot;form&quot;&gt;
          &lt;form className=&quot;form-signin&quot;&gt;
            &lt;div className=&quot;text-center mb-4&quot;&gt;
              &lt;h1&gt;Login&lt;/h1&gt;
              &lt;img
                className=&quot;mb-4&quot;
                src=&quot;/docs/4.5/assets/brand/bootstrap-solid.svg&quot;
                alt=&quot;&quot;
                width=&quot;72&quot;
                height=&quot;72&quot;
              &gt;&lt;/img&gt;
            &lt;/div&gt;
  
            &lt;div className=&quot;form-label-group&quot;&gt;
              &lt;input
                type=&quot;email&quot;
                id=&quot;inputEmail&quot;
                className=&quot;form-control&quot;
                placeholder=&quot;Email address&quot;
                value={this.state.username}
                onChange={this.handleUsernameChange}
              /&gt;{' '}
              &lt;br&gt;&lt;/br&gt;
            &lt;/div&gt;
  
            &lt;div className=&quot;form-label-group&quot;&gt;
              &lt;input
                type=&quot;password&quot;
                id=&quot;inputPassword&quot;
                className=&quot;form-control&quot;
                placeholder=&quot;Password&quot;
                value={this.state.password}
                onChange={this.handlePassword}
              /&gt;
            &lt;/div&gt;
  
            &lt;button
              className=&quot;btn btn-lg btn-dark&quot;
              type=&quot;button&quot;
              onClick={() =&gt; {
                this.login();
              }}
            &gt;
              Sign in
            &lt;/button&gt;
          &lt;/form&gt;
          &lt;a href=&quot;&quot;&gt;
            &lt;img
              id=&quot;img&quot;
              src=&quot;&quot;
              alt=&quot;&quot;
            /&gt;
          &lt;/a&gt;
          &lt;Spiiner /&gt;
        &lt;/div&gt;
      );
  
      return (
        &lt;div&gt;
          {!this.props.login ? &lt;div&gt;{loginPage}&lt;/div&gt; : &lt;Redirect to=&quot;/search&quot; /&gt;}
        &lt;/div&gt;
      );
    }
  }
  
  interface RootState {
    login: any;
  }
  
  const mapStateToProps = (state: RootState) =&gt; {
    console.log(state.login.isLoggedIn);
  
    return {
      login: state.login.isLoggedIn,
    };
  };
  
  export default connect(mapStateToProps)(Login);
  </code></pre>
  <p>And my test file is:</p>
  <pre><code>import { mount } from 'enzyme';
  import { configure } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  import { Login } from './Components/Form/Login';
  import React from 'react';
  import renderer from 'react-test-renderer';
  import { store } from './store/index';
  import { Provider } from 'react-redux';
  import { BrowserRouter as Router } from 'react-router-dom';
  import { makeMockStore } from '../MockUtil/utils';
  import moxios from 'moxios';
  import { MemoryRouter } from 'react-router-dom'
  
  
  configure({ adapter: new Adapter() });
  
  const setUp = (props = {}) =&gt; {
    const component = mount(
      &lt;Provider store={store}&gt;
        &lt;Router&gt;
          &lt;Login /&gt;
        &lt;/Router&gt;
      &lt;/Provider&gt;
    );
    return component;
  };
  
  it('render correctly text component', () =&gt; {
    const LoginComponent = renderer
      .create(
        &lt;Provider store={store}&gt;
          &lt;Login /&gt;
        &lt;/Provider&gt;
      )
      .toJSON();
    expect(LoginComponent).toMatchSnapshot();
  });
  
  let wrapper: any;
  
  describe('Login Page test', () =&gt; {
    let component;
    beforeEach(() =&gt; {
      wrapper = setUp();
    });
  
    // it('Shows spinner on Button click', () =&gt; {
    //   console.log(wrapper.html());
    //   wrapper.find('button').simulate('click');
    //   expect(wrapper.contains(&lt;div className=&quot;spinner-grow&quot; /&gt;)).toEqual(true);
    //   console.log(wrapper.html());
    // });
  
    it('check for existence of form', () =&gt; {
      const form = wrapper.find('form');
      expect(form.length).toBe(1);
    });
  });
  
  describe('Moxios', () =&gt; {
    beforeEach(() =&gt; {
      moxios.install();
      wrapper = setUp();
    });
    afterEach(() =&gt; {
      moxios.uninstall();
    });
  
  
  
    it('Calls the login class method on click', () =&gt; {
      const spyPreventDefault = jest.spyOn(Login.prototype, 'login');
      wrapper.find('button').simulate('click');
      expect(spyPreventDefault).toHaveBeenCalledTimes(1);
    });
  
    global.window = { location: { pathname: null } };
  
    it('specify response for a specific request', function (done) {
      console.log(wrapper.html());
      wrapper.find('button').simulate('click');
      moxios.wait(function () {
        let request = moxios.requests.mostRecent();
        request
          .respondWith({
            status: 200,
            response: {
              token: '8972fjh45kbwbrhg4hj5g',
            },
          })
          .then(function () {
            done();
          });
      });
    });
  });
  </code></pre>
  <p>I want to test for the re-direction and rendering of the new component.</p>
  <p>Please guide me.</p>
  <p>P.S: This is the first time I am dealing with testing.</p>