运行单元测试时出错 "You should not use <Link> outside a <Router>"

Question

我这里有一个单元测试，我正在执行一个点击事件。我收到错误：
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();
    });
});

我很确定我知道它为什么哭，但想知道在单元测试时是否有一种简单的方法来解决这个问题。我使用的单元测试框架是 @testing-libary/react.

Answer 1

您需要将任何正在测试的元素包装在 BrowserRouter 中。

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

然后就可以点击了

Answer 2

您可以创建一个包装器组件来使用 BrowserRouter

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

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

然后你可以这样使用它：

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

运行单元测试时出错 "You should not use <Link> outside a <Router>"

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

reactjs

react-router

react-test-renderer

react-testing-library

react-typescript

运行 单元测试时出错 "You should not use <Link> outside a <Router>"

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

reactjs

react-router

react-test-renderer

react-testing-library

react-typescript

运行单元测试时出错 "You should not use <Link> outside a <Router>"