CODEWITHSUNDEEP
reactjsreact-routerjestjsenzyme
David
David

Reputation: 4847

Test a component is rendered with React Router's render prop using Enzyme's shallow wrapper and Jest

If my component is rendering the following, how can I test that Main is being rendered using Enzyme's shallow wrapper and Jest?

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

Upvotes: 0

Views: 767

Answers (1)

skyboyer
skyboyer

Reputation: 23705

  1. we can search for Route as any other component with find()
  2. we can call .render() prop as long as we can reach <Route>
  3. because of shallow() we should get <Main ... as a result
  4. we still can refer to wrapper.state('uid')

So

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

[UPD] I think with renderProp it should be easier to verify result:

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

Upvotes: 2

Related Questions