3

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:

enter image description here

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).

enter image description here

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;

1 Answer 1

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}/>
Sign up to request clarification or add additional context in comments.

3 Comments

Nope, it doesn't works. But is a mock and i just use the locatios as a string to verify some renders...
That's a funky looking setup. I'd set a breakpoint before the return in your render method and explore the scope to see where your data might be hiding.
Added a update that maybe make more sense to all of this... i still can't figure out :/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.