运行单元测试时出错“你不应该在 <Router> 之外使用 <Link>”

问题描述

我在这里有一个单元测试，我正在执行一个点击事件。我收到错误：
skiprows = 0 failed (exception) skiprows = 1 failed (exception) skiprows = 2 failed (exception) skiprows = 3 failed (exception) skiprows = 4 failed (exception) skiprows = 5 failed (exception) skiprows = 6 failed (exception) skiprows = 7 failed (exception) skiprows = 8 failed (single column) Subject col1 col2 col3 0 1 10.0 1.0 3.0 1 2 11.0 2.0 4.0

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(); }); }); 。

解决方法

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

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

然后就可以点击了。

,

您可以创建一个 Wrapper 组件来使用 BrowserRouter

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

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

然后你可以像这样使用它：

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