unit-testing - 使用链接 : 's rendered outside of a router context cannot navigate.' 测试子组件

Question

我有一个创建 react-router Link 元素的按钮组件。它还允许传入 onClick 函数以实现其他功能(例如发送 Google Analytics 事件)。

我已将此组件包含在父组件中，如下所示:

export default class Page extends Component {
   const doSomething = () => {
    //do a thing to test here
   }

   return (
      <div>
         <Button
            onClickFn{() => doSomething()}
            linkToUrl='/other/page' //this creates a <Link> inside the button
          />
      </div>
   )
}

当我想测试 doSomething 是否被正确触发时，问题就来了。我使用 Enzyme mount 创建了包含按钮的测试 Page 组件。当我模拟点击时出现以下错误

 '<Link>s rendered outside of a router context cannot navigate.'

因为按钮中的链接没有上下文。有没有办法 mock 这个或防止错误显示？或者是否有更好的方法来测试此功能？

Answer 1

在您的测试中，您需要在 <Router> 中渲染组件。 .你可以看看tests for the <Link> component有关如何执行此操作的示例。

基本思想是创建一个内存历史实例，将其传递给 <Router> ，然后渲染 <Link>在 <Route> 里面传递给那个。这听起来有点复杂，但它相当简单。

import { createMemoryHistory } from 'history'

it('clicks', () => {
  const history = createMemoryHistory()
  const App = () => (
    <Router history={history}>
      <Route path='/' component={Page} />
    </Router>
  )
})