Testing react component within react router

Question

I want to test react component:

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

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

which is used in react router like this:

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

However, the test fails with:

Cannot read property 'id' of undefined

when I try to run:

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

Dawid Karabin · Accepted Answer · 2017-03-17 23:43:06Z

4

If you use react-router v4, you can use <MemoryRouter ...> and wrap your component with the <Route ...> component.

MemoryRouter keeps the history of your “URL” in memory (does not read or write to the address bar). Useful in tests and non-browser environments.

As example (from react-router repository)

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

So in your case

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

answered Mar 17, 2017 at 23:43

Dawid Karabin

5,3031 gold badge26 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Liero · Accepted Answer · 2017-03-21 08:04:55Z

0

I had to change pageProps to include routeParams:

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

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

In the page I was simply accessing routeParams instead of params

edited Mar 21, 2017 at 8:04

answered Jul 7, 2016 at 7:29

Liero

27.8k41 gold badges184 silver badges350 bronze badges

Collectives™ on Stack Overflow

Testing react component within react router

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related