Тестирование реакции компонентов жгутов реагировать маршрутизатор

Question

Я хочу, чтобы проверить реакцию компонента:

export class IdentityPage extends React.Component<PageProps, State> { 
    constructor(props: PageProps) { 
     super(props); 
    } 

    componentDidMount() { this.reload(this.props.routeParams.id); } 
    render(){....} 
} 

, который используется в реакции маршрутизатора, как это:

<Router history={hashHistory}> 
    <Route path="/"> 
     <Route path="Identities"> 
      <Route path=":action/:id" component={IdentityPage} /> 
     </Route> 
    </Route> 
</Router> 

Однако, тест не пройден с:

Невозможно прочитать свойство 'id' of undefined

, когда я пытаюсь запустить:

let pageProps: PageProps = { 
    params: { 
     action: "view", 
     id: "0" 
    } 
}; 
let instance = TestUtils.renderIntoDocument(React.createElement(IdentityPage, pageProps)); 

Answer 1

мне пришлось изменить pageProps включить routeParams:

let pageProps: PageProps = { 
    params: { action: "view", id: "0" }, 
    routeParams: { action: "view", id: "0" }, 
}; 

let instance = TestUtils.renderIntoDocument(React.createElement(IdentityPage, pageProps)); 

На странице я просто доступом к routeParams вместо params

Answer 2

Если вы используете response-router v4, вы можете использовать <MemoryRouter ...> и обернуть свой компонент компонентом <Route ...>.

MemoryRouter хранит историю вашего «URL» в памяти (не читает и не записывает в адресную строку). Полезно в тестах и ​​не в браузере.

В качестве примера (from react-router repository)

<MemoryRouter initialEntries={[ '/sushi/california' ]}> 
    <Route path="/sushi/:roll" render={({ match }) => { 
    return <div>{match.url}</div> 
    }}/> 
</MemoryRouter> 

Так что в вашем случае

let instance = TestUtils.renderIntoDocument(
    <MemoryRouter initialEntries={['view/0']}> 
    <Route path=":action/:id" component={IdentityPage} /> 
    </MemoryRouter> 
);