Модульное тестирование. Реагирует на компонент без сохранения состояния, заключенный в метод EnRime, с помощью метода withRouter (), как передать параметр соответствия.

Question

Я пытаюсь протестировать функциональный компонент React, который я обернул с помощью Router из response-router-dom.Структура компонентов выглядит следующим образом.

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 пришла из

Answer 1

ОК, так что, похоже, нет никакого способа передать соответствие в качестве параметра, но я нашел довольно элегантное решение. Причиной совпадения на компоненте является то, что он выводится напрямую, он не сопоставлен ни с чем. Я завернул компонент в маршрут, который соответствует initialEntries prop на 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>);

и presto, матч заполнен

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' } }