Jest Test React Router 链接导航

Question

我想使用 Jest Enzyme 测试以下组件。

<BrowserRouter>
   <Switch>
      <Route path='/' component={Home}/>
      <Route path='/view' component={View}/>
   </Switch>
</BrowserRouter>

class Home extends React.Component {
    render {
      <Link to='/view'>
         <button onClick={() => foo}>View Data</button>
      </Link>
    }
}

该代码在应用程序中正常工作。 但是，当我使用 jest-enzyme 测试按钮单击时，组件路径或内容不会改变

it('should redirect on button click', () => {
   const component= mount(
      <MemoryRouter initialEntries={{['/', '/view']}}>
         <Route path='/' component={Home}/>
         <Route path='/view' component={View}/>
      </MemoryRouter>
   )

   expect(component.find('Home')).toHaveLength(1); //passes
   expect(component.find('LinkAnchor').props().href).toEqual('/view'); //this also passes
   component.find('button').simulate('click');
   expect(component.find('View').toHaveLength(1); //This FAILS
});

我的问题：

1. 测试链接的唯一方法可以是检查其内部标签中的 href 吗？
2. 我们可以测试页面导航是否正常工作吗？

Answer 1

在这种情况下，您可能想要测试 MemoryRouter 的历史对象，以便在单击链接时进行更新。

但是，您遇到了这个问题，因为您用链接包装了一个按钮，并且您按下的是按钮而不是链接。

如果您的链接需要按钮样式，则应该更新 Link 组件：

return (
  <Link to='/view' className='buttonClass' onClick={() => foo()} />
);