我正在测试一些反应组件,一个基本的测试套件,只是为了知道一个组件是否正在呈现它们的孩子 .
我正在使用 redux-mock-store
来创建商店和 {mount} enzyme
来将容器挂载到提供程序中,但即使模拟正确的存储,也会始终触发此错误:
TypeError:无法读取undefined的属性'pathname'
这是我非常致命的基本测试:
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的格式正确:
任何的想法?
Update:
想一想,我在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;
1 回答
看起来您的位置对象位于路由器下方 .
假设测试是cli而不是在浏览器中,您的测试可能会抓取您的测试套件可能无法复制的window.location属性 .
也许试试: