react enzyme simulate click sub component

1// App.js
2function App() {
3  const [count, setCount] = React.useState(0)
4
5  const onClick = () => {
6    setCount((prevState) => prevState + 1)
7  }
8
9  return (
10    <div>
11      <button onClick={onClick}>{count}</button>
12    </div>
13  )
14}
15
16export default App
17
18//App.test.js
19describe('Counter Group', () => {
20  it('calls incCounter function when button is clicked', () => {
21    const wrapper = shallow(<App />)
22    const initClickCount = 2
23
24    for (let i = 0; i < initClickCount; i++) {
25      wrapper.find('button').simulate('click')
26    }
27
28    expect(wrapper.find('button').text()).toContain(2)
29
30    console.log(wrapper.debug())
31  })
32})

1/**
2 * This test passes with or without the onMouseOver/onMouseLeave handlers.
3 * In a real browser, onClickMock is not called without those handlers.
4 */
5const data = [
6  {title: 'Option 1', description: 'a cool option'}
7];
8it('should invoke a childs onClick handler when the child is clicked', () => {
9  const onClickMock = jest.fn();
10  const component = shallow(
11    <Dropdown
12      buttonContent='Dropdown'>
13      <ul>
14        { data.map((item, index) => {
15          return (
16            <li
17              key={ index }
18              onClick={ onClickMock }
19              data-test-section={ `dropdown-item-${index}` }>
20              { item.title }
21            </li>
22          );
23        })
24      }
25    </ul>
26  </Dropdown>
27);
28
29   component.find('button').simulate('click');
30   component.find('[data-test-section="dropdown-item-1"]').simulate('click');
31   expect(onClickMock.mock.calls.length).toBe(1);
32 });

1//Counter.js
2import React from 'react'
3
4function Counter() {
5  const [count, setCount] = React.useState(0)
6
7  const onClick = () => setCount((prevState) => prevState + 1)
8
9  return (
10    <div>
11      <button onClick={onClick}>{count}</button>
12    </div>
13  )
14}
15
16export default Counter
17
18//App.js
19import React from 'react'
20import Counter from './Counter'
21
22const App = (props) => {
23  return (
24    <>
25      <Counter />
26    </>
27  )
28}
29
30export default App
31
32//App.test.js
33import React from 'react'
34import { mount } from 'enzyme'
35import App from './App'
36import Counter from './Counter'
37
38describe('Counter Group', () => {
39  it('calls incCounter function when button is clicked', () => {
40    const wrapper = mount(<App />)
41    const subComponent = wrapper.find(Counter)
42    const initClickCount = 2
43
44    expect(subComponent.find('button').exists()).toBeTruthy()
45
46    for (let i = 0; i < initClickCount; i++) {
47      subComponent.find('button').simulate('click')
48    }
49
50    expect(subComponent.find('button').text()).toContain(2)
51
52    console.log(wrapper.debug())
53  })
54})
55