TypeError: Cannot read property 'pathname' of undefined in react/redux testing

Question

I'm testing some react components, a basic tests suite just to know if a component is rendering and their childs.

I'm using redux-mock-store to make the store and {mount} enzyme to mount the container in a provider, but even mocking the correct store this error is always fired:

TypeError: Cannot read property 'pathname' of undefined

Here is my very deadly basic test:

import React from 'react';
import { mount } from 'enzyme';
import configureStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import App from '../containers/App.container';

describe('App', () => {
  let wrapper;
  const mockStore = configureStore([]);
  const store = mockStore({
    router: {
      location: { pathname: '/home', query: {}, search: '' },
      params: {}
    }
  });
  console.log(store.getState());
  beforeEach(() => {
    wrapper = mount(
      <Provider store={store}>
        <App />
      </Provider>
    );
  });

  it('Should render app and container elements', () => {
    expect(wrapper.find('.app').exists()).toBeTruthy();
    expect(wrapper.find('.container').exists()).toBeTruthy();
  });

  it('Should render the navbar', () => {
    expect(wrapper.find('nav').exists()).toBeTruthy();
  });
});

And the (even more) simple component / container:

import React, { Component } from 'react';
import NavBar from '../components/Navbar';

class App extends Component {

  render() {
    const { location, logout} = this.props;
    console.log(location);
    return (
      <section className='app'>
        <NavBar location={location.pathname} onLogoutClick={logout}/>
        <div className='container'>
          {this.props.children}
        </div>
      </section>
    );
  }
}

export default App;

Container:

import { connect } from 'react-redux';
import { signOut } from '../actions/auth.actions'
import App from '../components/App';

const mapStateToProps = (state, ownProps) => {
  return {
    location: ownProps.location
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    logout: () => {
      dispatch(signOut())
    }
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

I can't figure out the problem of the test, the mockStore is in the correct format:

Any idea?

---

Update:

Thinking about it, I have no reducer / prop in the rootReducer for the location, but, i just want to pass down through the children components the location object properties that react-redux-router make available in the ownProps argument.

Weird fact: logging the location property in the app returns me the correct object.

In the tests, is always undefined... (as the error shows).

Here is my rootReducer:

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import { routerReducer } from 'react-router-redux';

import authReducer from './auth.reducer';
import analysisReportsReducer from './AnalysisReports.reducer';
import titleAnalysisReducer from './TitleAnalysis.reducer';
import postsReportsReducer from './PostsReports.reducer';

const rootReducer = combineReducers({
  form:             formReducer,
  routing:          routerReducer,
  auth:             authReducer,
  analysis:         titleAnalysisReducer,
  analysis_reports: analysisReportsReducer,
  posts:            postsReportsReducer
});

export default rootReducer;

Answer 1

It looks like your location object is scoped beneath the router.

Your test may be grabbing the window.location property, which your test suite may not replicate, assuming the test is cli and not in a browser.

Perhaps try:

<NavBar location={this.props.router.location.pathname} onLogoutClick={logout}/>