如何用酶测试反应路由器链接？

Question

我看到很多与此类似的问题，但似乎都过时或令人难以置信。

我有一个React组件，其中包含一个React Router Link组件，如下所示：

export default class Home extends Component {                                      
  render() {                                                                       
    return (                                                                       
      <div className="Home">  
        <Link to="/mission">Begin</Link>                                           
      </div>                                              
    );                                                                             
  }                                                                                
}

然后，我尝试使用Jest 非常简单地测试该Home组件是否包含Link具有to=/mission属性的组件。因此，根据Testing React Router文档，我尝试了多种测试，但是此代码最简洁地演示了我要实现的目标（示例为简单起见，使用jest酶）：

it('includes link to Mission scene', () => {                                       
  const home = shallow(<MemoryRouter><Home /></MemoryRouter>);                                                              
  expect(home).toContainReact(<Link to="/mission">Begin</Link>)                    
});

显然，该代码有几个问题，其中最重要的是错误：

Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.

但是请注意关键点：我想浅化渲染（如果可能的话）Home组件，以便隔离测试该组件。同时，我尝试将其包装在MemoryRouter或以某种方式使上下文就位，以便可以测试Link组件。

敏锐的潜在回答者会注意到，此问题实际上将阻止该组件的所有隔离测试（而不仅仅是与React Router相关的测试），因为我根本无法浅化该组件。

Answer 1

您可以使用Enzyme的find方法：

import { Link } from 'react-router';

it('includes link to Mission scene', () => {                                       
  const wrapper = shallow(<MemoryRouter><Home /></MemoryRouter>);
  expect(wrapper.find(Link).props().to).toBe('/mission');
 });