使用 Enzyme 浅层包装器和 Jest 使用 React Router 渲染道具测试组件渲染

【问题标题】：Test a component is rendered with React Router's render prop using Enzyme's shallow wrapper and Jest使用 Enzyme 浅层包装器和 Jest 使用 React Router 渲染道具测试组件渲染
【发布时间】：2018-12-20 17:40:20
【问题描述】：

如果我的组件正在呈现以下内容，我如何测试 Main 正在使用 Enzyme 的浅包装器和 Jest 呈现？

  <div className='App'>
    {this.state.uid &&
      <React.Fragment>
        <Route exact path='/' render={() => <Main uid={this.state.uid} />} />
      </React.Fragment>
    }
  </div>

【问题讨论】：

expect(wrapper.find('Router[path="/"]').at(0).props().render().html()).toEqual('<Main uid={what"s you uid here?} />')怎么样
感谢您的回复，但它不起作用。我相信这是因为浅渲染。
expect(wrapper.find('Route[path="/"]').at(0).props().render()).toEqual(<Main uid={111} />) 为我通行证
它也适用于我！随时将此作为答案发布，以便我可以将其标记为已解决。谢谢！！

标签： reactjs react-router jestjs enzyme

【解决方案1】：

我们可以搜索Route 和find() 一样的任何其他组件
只要能联系到<Route>，我们就可以调用.render() prop
由于shallow()，我们应该得到<Main ...作为结果
我们还是可以参考wrapper.state('uid')

所以

expect(
  wrapper
    .find('Route[path="/"]')
    .at(0)
    .props()
    .render()
 ).toEqual(<Main uid={wrapper.state('uid')} />)

[UPD] 我认为使用renderProp 应该更容易验证结果：

expect(
  wrapper
    .find(Route)
    .filter({path: '/'})
    .renderProp('render')
    .find(Main)
    .prop('uid')
 ).toEqual(wrapper.state('uid'))

【讨论】：