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