Jest and Enzyme unit test: TypeError: Cannot read property 'push' of undefined

Viewed 6171

I'm writing a unit test to simulate a click on a button. The button's onClick method has a reference to a method that loads another page using props.history.push('/). The simulation works but jest says it can't read the property push because history is undefined and that makes the test to fail.How can i add props.history while unit testing .What i'm i doing wrong.

This is the test file

 import React from 'react';
import Landing from '../Components/Landing/Landing';
import configureStore from 'redux-mock-store';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import {StyleRoot}from 'radium';
import { Provider } from 'react-redux';
import { createMemoryHistory } from 'history';


Enzyme.configure({ adapter: new Adapter() });

const mockStore = configureStore();

let wrapper;
let store;


const initialState = {
    auth:{
        isLoggedIn:false,
        role:''
    },

};

const history = createMemoryHistory().push('/');

beforeEach(()=>{

    store = mockStore(initialState); 

    wrapper = mount( <Provider store={store} >
                        <StyleRoot> 
                          <Landing history={history}/> 
                        </StyleRoot> 
                     </Provider>
                    ); 

});

   describe('Landing.js',()=>{

    it ('Simulate click', ()=>{

        const signInBtn = wrapper.find('.Btn');

        signInBtn.simulate('click');

       });  

   });

This is the component

const landing = props =>{


const loadSignInPage = ()=>{
    props.history.push('/signin');
};


 return(
     <React.Fragment>

        <Button buttonClass="SignIn" className="Btn" click={loadSignInPage}>SIGN IN</Button>

     </React.Fragment>
 );
};

const mapStateToProps = state =>{
    return{
        isLoggedIn: state.auth.isLoggedIn,
        role: state.auth.role
    };
};

export default connect(mapStateToProps)(landing);

The error

  TypeError: Cannot read property 'push' of undefined

   8 | 
   9 | const loadSignInPage = ()=>{
> 10 |     props.history.push('/signin');
     |                   ^
  11 | };

How can i add props.history while unit testing

3 Answers

Looks like createMemoryHistory().push() returns undefined.
Try this instead.

const history = createMemoryHistory();
history.push('/');

Use MemoryRouter while doing mount and don't forget to pass props to Landing Component.

import { MemoryRouter, Route } from 'react-router-dom';

describe('Landing.js',()=>{
    beforeEach(()=>{
        wrapper = mount(<Provider store={store} >
                            <StyleRoot> 
                                <MemoryRouter initialEntries={['/landing']}>
                                    <Route exact path="/landing" component={(props)=><Landing {...props}/>} />
                                </MemoryRouter>
                           </StyleRoot> 
                        </Provider>
                        );
    }
}
Related