TypeError：反応/還元テストで未定義のプロパティ 'pathname'を読み取ることができません

Question

いくつかの反応コンポーネント、つまりコンポーネントがレンダリングされているかどうかを知るための基本テストスイートをテストしています。

私は店を作るためにredux-mock-storeを使用して{mount} enzymeプロバイダで容器を取り付けるために、それでもこのエラーが常に発射される正しいストアをからかっている：ここで

TypeError: Cannot read property 'pathname' of undefined

は私の非常に致命的な基本的なテストです。

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(); 
    }); 
}); 

と、（それ以上）の単純なコンポーネント/コンテナ：

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; 

コンテナ：

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

私はテストの問題を、mockStoreが正しい形式である把握することはできません。

任意のアイデア？

---

更新：

はそれについて考え、私は場所のためのrootReducerには減速/小道具を持っていない、しかし、私はちょうど子供のコンポーネントを介しreact-redux-router場所オブジェクトのプロパティを伝承したいですownProps引数で利用できます。

アプリにlocationプロパティを記録すると、私に正しいオブジェクトが返されます。

テストでは、（エラーが示すように）常に未定義です。

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

それはあなたの場所のオブジェクトがルータの下にスコープされるようになっています

は、ここに私のrootReducerです。

テストがwindow.locationプロパティを取得している可能性があります。このプロパティは、テストスイートがブラウザではなくcliであると仮定すると複製できません。

おそらく試してみてください。

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