单元测试用 Enzyme 中的 withRouter() 包裹的 React 无状态组件，如何传递匹配参数

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

尽管组件的 props 继承自 RouteComponentProps，但我无法将其添加到组件 props 中，而且我找不到 MemoryRouter 的任何变体，可以让我通过 props 传递匹配项，有人可以帮忙吗？

编辑：withRouter 包装来自

Answer 1

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

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 无状态组件，如何传递匹配参数

Unit testing React stateless component wrapped with withRouter() in Enzyme, how to pass match parameter

typescript

reactjs

react-router

react-router-v4