Question

我正在尝试从react-router-dom测试我用withRouter包装的React功能组件。组件结构如下。

import * as React from 'react';
import { Switch, Route, withRouter, RouteComponentProps } from 'react-router-dom';


export interface Props extends RouteComponentProps {
    closeModalLinkPath: string;
    closeModalFunction: any;
}

const RouterWrappedComponent= withRouter(({ match, history, closeModalLinkPath, closeModalFunction }: Props) => {

return (<div></div)
    }
});

export default RouterWrappedComponent;

此结构在浏览器中可以完美运行，但是我在编写单元测试时遇到困难。由于组件的性质，我需要一个精确的匹配对象，但是我找不到在世代相传的任何方法。

var routerWrappedComponent= Enzyme.mount(<MemoryRouter initialEntries={[`/studio/00000000-0000-0000-0000-000000000000/manage`]}>
    <RouterWrappedComponent closeModalFunction={() => { }} closeModalLinkPath={`/studio/00000000-0000-0000-0000-000000000000`} />
</MemoryRouter>);

尽管组件的道具继承自RouteComponentProps，但我无法将其添加到组件道具中，也找不到MemoryRouter的任何变化形式，这些变化会让我通过道具传递匹配，任何人都可以帮助吗？

编辑：withRouter包装来自here

Answer 1

好的，因此似乎没有任何方法可以将match作为参数传递，但是我找到了一个非常优雅的解决方案。组件上的match为空的原因是因为它是直接带来的，没有任何匹配。我将组件包装在与initialEntries上的MemoryRouter道具匹配的路线中，如下所示。

var routerWrappedComponent= Enzyme.mount(<MemoryRouter initialEntries={[`/studio/00000000-0000-0000-0000-000000000000/manage/11111111-0000-0000-0000-000000000000`]}>
       <Route path={`/studio/:customerId/:page/:serviceId`} component={() =>  
    <RouterWrappedComponent closeModalFunction={() => { }} closeModalLinkPath={""} />
</MemoryRouter>);

然后保存，匹配完成

match: { path: '/studio/:customerId/:page/:serviceId',
    url: '/studio/00000000-0000-0000-0000-000000000000/manage/11111111-0000-0000-0000-000000000000',
    isExact: true,
    params:
     { customerId: '00000000-0000-0000-0000-000000000000',
       page: 'manage',
       serviceId: '11111111-0000-0000-0000-000000000000' } }

单元测试在Enzyme中用withRouter（）包装的React无状态组件，如何传递匹配参数

1 个答案: