测试路由器随附的反应组件(最好使用笑话/酶) [英] Testing react component enclosed in withRouter (preferably using jest/enzyme)

问题描述

我有一个React组件，该组件包含在带有路由器的高级组件中，如下所示:

I have a React component which is enclosed within Higher Order Component withRouter as below:

module.exports = withRouter(ManageProfilePage);

我的路线如下:

<Route path="/" component={AdrApp}>
    <IndexRoute component={Login}/>
    <Route component={CheckLoginStatus}>
        <Route path="manage-profiles/:profileId" component=
        {ManageProfilesPage}/>
     </Route>
    <Route path="*" component={notFoundPage}/>
</Route>

我需要使用一次路由器生命周期方法，这就是为什么我需要withRouter:

I need to use once of the Router lifecycle methods, that is why I need withRouter:

class ManageProfilePage extends React.Component {
    componentDidMount() {
    this.props.router.setRouteLeaveHook(this.props.route, () => {
      ...
    })
    render(){
    ... 
    }
}

我需要使用Jest/Enzyme测试此组件，并且编写了如下的测试用例:

I need to test this component using Jest/Enzyme and I wrote the test case as below:

describe('manage profile page test suite', () => {


    it('snapshot test', () => {

        const setRouteLeaveHook =jest.fn();

        let wrapper = shallow(
            <ManageProfilePage params={{id : 25, router: 
        setRouteLeaveHook}}/>
        );
      expect(wrapper).toMatchSnapshot();
    })
   }) 

问题在于它无法呈现出一个深层次.我将粘贴以下快照:

The issue is it is not rendering one level deep. I am pasting the snapshot below:

exports[`manage drug term page test suites snapshot test 1`] = `
<ManageProfilePage
  params={
    Object {
      "id": 25,
      "router": [Function],
    }
  }
/>
`;

是否有其他方法可以编写测试用例，以便能够将ManageProfilePage至少渲染1层?它无法呈现，因为它包含在WithRouter中?我们如何测试这些类型的组件?

Is there any different way I can write my test case so that I am able to render ManageProfilePage atleast 1 level deep? It is not able to render as it is enclosed within WithRouter? How do we test these type of components?

推荐答案

通常，如果我们尝试测试此类组件，我们将无法对其进行渲染，因为它被包装在WithRouter中(WithRouter是对提供以下内容的组件的包装: 路由器道具(例如比赛，路线和历史记录)可在组件内直接使用). module.exports = withRouter(ManageProfilePage);

Normally if we try to test such components we won’t be able to render it as it is wrapped within WithRouter (WithRouter is a wrapper over a component which provides Router props like match, route and history to be directly used within the component). module.exports = withRouter(ManageProfilePage);

要渲染这样的组件，我们必须使用WrappedComponent关键字明确地告诉它渲染包装的组件. 例如我们将使用以下代码进行快照测试:

To render such components, we have to explicitly tell it to render the wrapped component using WrappedComponent keyword. For Eg. we will use below code for snapshot test:

describe('manage profile page test suite', () => {


    it('snapshot test', () => {

        const setRouteLeaveHook =jest.fn();

        let wrapper = shallow(
            <ManageProfilePage.WrappedComponent params={{id : 25, router: 
        setRouteLeaveHook}}/>
        );
      expect(wrapper).toMatchSnapshot();
    })
   }) 

这将告诉酶对WithRouter中包装的组件ManageProfilePage进行浅层渲染(浅层渲染仅渲染该特定组件并跳过子组件).

This will tell enzyme to do shallow rendering (Shallow Rendering renders only that particular component and skips child components) for ManageProfilePage which is wrapped component within WithRouter.

这篇关于测试路由器随附的反应组件(最好使用笑话/酶)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！