Error when running unit test "You should not use <Link> outside a <Router>"

Question

I have a unit test here and I am performing a click event. I am getting the error:
Invariant failed: You should not use <Link> outside a <Router>

describe("when the menu icon has been clicked", () => {
    test("the account menu should be displayed", () => {
        const { getByTestId } = render(<AccountMenu userDetails={fakeUser}></AccountMenu>);
        const button = getByTestId("button-icon-element");
        fireEvent.click(button);
        screen.debug();
    });
});

I am pretty sure I know why it's crying but wondering if there is a simple way to get around this whilst unit testing. The unit testing frame work I'm using is @testing-libary/react.

jjnrmason · Accepted Answer · 2021-03-24 21:07:30Z

5

You are required to wrap any elements being tested in a BrowserRouter.

const { getByTestId } = render(<BrowserRouter><AccountMenu userDetails={fakeUser}></AccountMenu></BrowserRouter>);

And then it can be clicked.

answered Mar 24, 2021 at 21:07

jjnrmason

3111 gold badge5 silver badges21 bronze badges

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

1 Comment

Azhar Over a year ago

don't forgot to import import { BrowserRouter } from "react-router-dom"

Sortweste · Accepted Answer · 2021-03-24 22:20:42Z

2

You can create a Wrapper Component to work with BrowserRouter

const Wrapper = ({ children }) => {
  return (
    <BrowserRouter>
       {children}
    </BrowserRouter>
  );
};

const renderWithRouter = (ui) => {
  return render(ui, { wrapper: Wrapper});
};

And then you can use it like this:

const { getByTestId } = renderWithRouter(<AccountMenu userDetails={fakeUser} />)

answered Mar 24, 2021 at 22:20

Sortweste

2932 gold badges5 silver badges12 bronze badges

1 Comment

jjnrmason Over a year ago

Ahh okay that's cool. Little cleaner too.

Collectives™ on Stack Overflow

Error when running unit test "You should not use <Link> outside a <Router>"

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related