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

Question

如果我的组件正在渲染以下内容，那么如何使用酶的浅层包装和Jest测试Main是否正在渲染？

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

Answer 1

1. 我们可以使用find()来搜索Route，就像其他任何组件一样
2. 只要我们能到达.render()，我们就可以打电话给<Route>道具
3. 由于shallow()，我们应该得到<Main ...
4. 我们仍然可以引用wrapper.state('uid')

所以

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