How would I test for a react router route param in react-testing-library?

Question

I am using redux and react router.

I want to test that a route param shows up on the page.

test('route param is displayed', async () => {
  const { queryByText } = customRender(
    <EditCard />,
    {
      route: '/card/1554990887217',
    }
  );
const cardId = queryByText(/1554990887217/);
await waitForElement(() => cardId);
})

my custom render wraps router and redux like so:

export const customRender = (
  ui,
  {
    route = '/',
    history = createMemoryHistory({ initialEntries: [route] }),
    initialState,
    store = createStore(rootReducer, initialState),
    ...options
  } = {}
) => ({
  ...rtl(
    <Provider store={store}>
      <Router history={history}>{ui}</Router>
    </Provider>,
    options
  ),
  history,
});

The route param just doesn't show up in the test. It just errors with a time out.

It works on the page though, as in everything works as expected if I start the app up and test it manually.

Dharman · Accepted Answer · 2022-10-14 18:01:06Z

15

You need to pass the route in as well.

const { queryByText } = render(
    <Route path="/card/:cardId">
      <EditCard />
    </Route>,
    {
      route: '/card/1554990887217',
    }
  );

edited Oct 14, 2022 at 18:01

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

answered Apr 12, 2019 at 4:07

Josh Pittman

7,3748 gold badges45 silver badges68 bronze badges

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

1 Comment

Ash Blue Over a year ago

Look like this answer doesn't work anymore with v5

Collectives™ on Stack Overflow

How would I test for a react router route param in react-testing-library?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related