使用 react-testing-library 和 react router v6 编写测试答案

【问题标题】：writing test using react-testing-library and react router v6使用 react-testing-library 和 react router v6 编写测试
【发布时间】：2022-06-22 22:59:45
【问题描述】：

我被困了几个小时试图测试一个简单的页面，我正在使用 "react-router-dom": "^6.3.0"

我有这个要测试的组件：

const Main: React.FC = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<div>Home</div>}></Route>
        <Route
          path={"about"}
          element={<div>About</div>}
        />
      </Routes>
    </BrowserRouter>
  )
}

export default Main

效果很好，然后我有 Main.test.tsx

const renderWithRouter = (ui: React.ReactElement, { route = '/' } = {}) => {
  window.history.pushState({}, 'Test page', route)

  return {
    user,
    ...render(ui, { wrapper: BrowserRouter }),
  }
}

describe('Main', () => {
  beforeEach(() => {
    renderWithRouter(<Main />, { route: '/about' })
  })

  test('should land on about page', async () => {
    await screen.findByText('about')
  })
})

但我收到了这个错误

Error: Uncaught [Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.]

有什么线索吗？

【问题讨论】：

因为renderWithRouter 正在用另一个BrowserRouter 包装一个已经包含BrowserRouter 的组件。我通常将路由器移至index.tsx 文件，正是为了方便测试依赖于路由器上下文的所有其他组件。

标签： javascript reactjs react-router-dom

【解决方案1】：

错误是由两次使用BrowserRouter 引起的（你们都包装了Main 组件及其内容）。我建议您从 Main 组件内部删除 BrowserRouter 并用它包裹根元素。如果 Main 组件是根元素，则结果将在 index.tsx 文件中：

ReactDOM.render(
 <BrowserRouter>
   <Main />
 </BrowserRouter>,
 document.getElementById("root")
)

一旦您这样做并从Main 组件中删除BrowserRouter，您就可以开始了，并且在测试期间您不会收到该错误。

更多文档在这里：https://testing-library.com/docs/example-react-router/

【讨论】：