Testing reagieren Komponente withing reagieren Router

Question

I-Komponente reagieren testen wollen:

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

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

die im Router wie diese reagieren verwendet wird:

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

jedoch der Test nicht bestanden mit:

Die Eigenschaft 'id' von undefined kann nicht gelesen werden

zu laufen 10

, wenn ich versuche:

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

Answer 1

ich routeParams musste pageProps ändern aufzunehmen:

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

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

auf der Seite ich einfach routeParams statt params

Answer 2

zugriff Wenn Sie react-router v4, können Sie <MemoryRouter ...> verwenden und Ihre Komponente mit der Komponente <Route ...> umhüllen.

MemoryRouter speichert den Verlauf Ihrer "URL" im Speicher (liest oder schreibt nicht in die Adressleiste). Nützlich in Tests und Nicht-Browser-Umgebungen.

Als Beispiel (from react-router repository)

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

So in Ihrem Fall

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