测试需要参数的连接反应组件

Question

I'm trying to test a connected react component that needs a props.params.id to call action creators. When I try to test that the component is connected to the store I get "Uncaught TypeError: Cannot read property 'id' of undefined"

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={PostsIndex}/>
        <Route path="posts/:id" component={ShowPost}/>
      </Route>
    </Router>
  </Provider>
  , document.querySelector('.container'));


describe('ConnectedShowPost', ()=> {
    let initialState = {
      posts: { postsList: postsListData, post: postData, error: '' },
      comments: {showComments: false},
      auth: {authenticated: true}
    };

    store = mockStore(initialState);

    connectedShowPost = TestUtils.renderIntoDocument(<Provider store={store}><ConnectedShowPost/></Provider>);
    showPost = TestUtils.scryRenderedComponentsWithType(connectedShowPost, ShowPost)[0];


    expect(showPost.props.posts.post).toEqual(postData);
  })

I've tried including params in the store but that doesn't work since params is not hooked up to the store when used inside the component.

I've also tried passing it in as an ownProps argument and that didn't work either.

Passing it in to the ConnectedShowPost component as a props causes all other state items in the store to be undefined..

Also tried to directly set showPost.props.params = {id: '123} which didnt work either..

Any ideas on how to get this test to work?

Answer 1

If your connected component receives a param like this:

function mapStateToProps(state, ownProps)
{
    const { match: { params } } = ownProps;
    console.log(params.id);

    return {
         ......
    };
}

Then, In your test it's possible to inject that param as traditional props. Check out the next example:

    wrapper = mount(
        <MemoryRouter>
            <ConnectedContainer
                store={store}
                match={
                    {
                        params: {
                            id: 1
                        }
                    }
                }
            />
        </MemoryRouter>
    );