React testing error when wrapping a Component in a Memory Router

Question

I am testing on React, and I want to see the detail of a page and I need to pass a param in the path, so I was searching and I need to wrap my component in a MemoryRouter and a Route, but I still getting an error:

MemoryRouter:

component = render(
  <Provider store={store}>
    <MemoryRouter initialEntries={['/characters/1009368']}>
      <Route path="characters/:id">
        <CharacterDetail />
      </Route>
    </MemoryRouter>
  </Provider>,
);

And this is the error that I got:

console.error
  Error: Uncaught [Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.]

What can I do?

...wrap your Route in a Routes? – jonrsharpe Nov 12 '21 at 21:34 — jonrsharpe, Nov 12 '21 at 21:34

score 3 · Answer 1 · answered Nov 12 '21 at 21:36

3

The error message is pretty straightforward, wrap your Route components in a Routes component.

For example:

      <Routes>
        <Route path="/welcome" element={<Welcome />} />
        <Route path="/game" element={<Game />} />
        <Route path="/leaderboard" element={<Leaderboard />} />
      </Routes>

for more details, visit here

answered Nov 12 '21 at 21:36

Yasin Br

1,675
1
6
16

Ohh I see, It was so easy and I was struggling with that jajaj thank you! – Alex Cuadra Nov 12 '21 at 21:40

React testing error when wrapping a Component in a Memory Router

1 Answers1