Question

我正在尝试测试需要props.params.id来调用动作创建者的连接反应组件。当我尝试测试组件是否连接到商店时，我得到“Uncaught TypeError：无法读取未定义的属性'id'”

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

我已经尝试在商店中加入params，但这不起作用，因为在组件内部使用时，params没有连接到商店。

我也尝试将其作为ownProps参数传递，但也不起作用。

将其作为道具传递给ConnectedShowPost组件会导致商店中的所有其他状态项未定义。

还试图直接设置showPost.props.params = {id：'123}哪个也没用..

有关如何使此测试起作用的任何想法？

Answer 1

如果您连接的组件收到这样的参数：

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

    return {
         ......
    };
}

然后，在您的测试中，可以将该参数作为传统道具注入。查看下一个示例：

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

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

1 个答案: