测试包含在 withRouter 中的 react 组件(最好使用 jest/enzyme) [英] Testing react component enclosed in withRouter (preferably using jest/enzyme)

问题描述

我有一个 React 组件，它包含在高阶组件 withRouter 中，如下所示:

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>

我需要使用一次 Router 生命周期方法，这就是我需要 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.

这篇关于测试包含在 withRouter 中的 react 组件(最好使用 jest/enzyme)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！