wrapper.find with id in enzyme and jest doesn't find element

Question

I'm new to Jest and Enzyme testing, and I would like to know why the find function is not working with id.

//html from react, just the code where is the id increment

<div className="App-body">
  <div className="changePage">
    <button className="Selections" onClick={this.decrementPage}>Previous</button>
    <p className="changePageNumber">{this.state.page}</p>
    <button className="Selections" id="increment" onClick={this.incrementPage}>Next</button>
  </div>
</div>

//test

it('next page', () => {
  const wrapper = shallow(<Home />)
  const incrementPage = wrapper.find('#increment')
  incrementPage.simulate('click')
  const countState = wrapper.state().page
  expect(countState).toEqual(2)
})

Method “simulate” is meant to be run on 1 node. 0 found instead.

25 |   //const text = wrapper.find('p').text()
 26 |   const incrementPage = wrapper.find('#increment')
> 27|   incrementPage.simulate('click')
    |                 ^                   

Answer 1

Try using mount instead of shallow. shallow does not render beyond the first level of elements. In your case, only the div with className 'App-Body' is rendered