RouteComponentProps로 React 구성 요소를 테스트하는 방법?

Question

I는 다음과 같습니다 RouteComponentProps을 확장 소품가있는 구성 요소가 : 나는 응용 프로그램 내 구성 요소를 사용하는 경우, 이제

export interface RouteComponentProps<P> { 
    match: match<P>; 
    location: H.Location; 
    history: H.History; 
    staticContext?: any; 
} 

을, 나는 이러한 소품을 전달합니다

<MyComponent 
    match={this.props.match} 
    location={this.props.location} 
    history={this.props.history} 
/> 

소품은 반응 라우터 내부에서 실행 중이므로 이미 사용할 수 있습니다.

match, location, history없이이 구성 요소를 테스트하려면 어떻게해야합니까?

모의해야합니까? 아니면 어떻게 든 자동으로 도우미 기능을 사용하여로드해야합니까?

Answer 1

나는이 좋은 해결책을 찾고 있었다. 내가 mapStateToProps 함수 또는 simular 뭔가 그것을 할 수 있지만, 아직 이것을 할 수 없었 으면 좋겠다.

내가 할 수있는 최선의 방법은 이것을 조롱하고 경기, 위치 및 기록을 전달하는 것입니다.

var routerProps = getMockRouterProps<ReduxTestComponentProps>(null); 

    const wrapper = mount<ReduxTestComponent, ReduxTestComponentState>(
      <ReduxTestComponent 
       history={routerProps.history} 
       location={routerProps.location} 
       match={routerProps.match} 
       isLoadingTodo={false} 
       todos={todos} 
       addAsyncTodoActionDispatch={() => mockTodoAddDispatch()} 
       deleteTodoActionDispatch={() => mockTodoDeleteDispatch()} 
       /> 
    ); 

: 내가 한 내 테스트에서 그런

import { RouteComponentProps } from 'react-router' 
import { match } from 'react-router-dom'; 
import {UnregisterCallback, Href} from 'history' 

export function getMockRouterProps<P>(data: P) { 

    var location: { 
      hash: "", 
      key: "", 
      pathname: "", 
      search: "", 
      state: {} 
     }; 

    var props: RouteComponentProps<P> = { 
    match: { 
      isExact: true, 
      params: data, 
      path: "", 
      url: "" 
     }, 
     location: location, 
     history: { 
      length:2, 
      action:"POP", 
      location: location, 
      push:() => {}, 
      replace:() => {}, 
      go: (num) => {}, 
      goBack:() => {}, 
      goForward:() => {}, 
      block: (t) => { 
       var temp: UnregisterCallback = null; 
       return temp; 
      }, 
      createHref: (t) => { 
       var temp: Href = ""; 
       return temp; 
      }, 
      listen: (t) => { 
       var temp: UnregisterCallback = null; 
       return temp; 
      } 

     }, 
     staticContext: { 
     } 
    }; 


    return props; 
} 

: 나는 다음을 사용