類型錯誤：無法在反應/redux 測試中讀取未定義的屬性“路徑名”

Question

我正在測試一些反應組件，一個基本的測試套件只是為了知道一個組件是否正在渲染及其子組件。

我正在使用redux-mock-store來制作 store 和{mount} enzyme來將容器安裝在提供者中，但即使redux-mock-store正確的存儲，這個錯誤也總是被觸發：

類型錯誤：無法讀取未定義的屬性“路徑名”

這是我非常致命的基本測試：

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 中沒有用於位置的 reducer / prop，但是，我只想通過子組件傳遞react-redux-router在ownProps參數中提供的位置對象屬性。

奇怪的事實：在應用程序中記錄location屬性會返回正確的對象。

在測試中，總是未定義...（如錯誤所示）。

這是我的 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

看起來您的位置對象位於路由器下方。

您的測試可能正在獲取 window.location 屬性，您的測試套件可能不會復制該屬性，假設測試是 cli 而不是在瀏覽器中。

也許嘗試：

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