Facing problem for code coverage in React and JEST - reactjs

Question

I have a parent component(App.js) and I have child component(Counter), I am updating the state by passing a function from parent component to child component due to this I am unable to cover 100% code coverage.
I am trying for 100% code coverage for app.js in app.test.js.
After run test command ex: npm test -- app.test.js
its suggesting to cover the setState() and setCounter() methods.
please help me in this.
Thanks in Advance.
import { connect } from 'react-redux'
import logo from './logo.svg';
import './App.css';
import {Counter} from './counter';
import MouseTracker from './renderProps/Mouse';
function App(props) {
const [state, setState] = useState(false);
const [counter, setCounter] = useState(0);
const updateMyState = () => {
setState(true);
setCounter(counter+1)
}
return (
<div className="App">
<MouseTracker />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>{props.counter}</p>
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
onClick={props.onClick}
>
Learn React
</a>
{/* Passing my updateMyState function as props */}
<Counter propEvents={updateMyState} />
</header>
</div>
);
}
function mapStateToProps(state) {
return { ...state }
}
export default connect(mapStateToProps)(App);
Counter component code
export const Counter = (props) => {
return (
<button id="abc" onClick={props.propEvents}>hello</button>
// {props?.st?.map(i => {
// return <p key={i.id}>id {i.id}, name: {i.name}</p>
// })}
)
}
*** Test code ***
import React from 'react';
import App from './App';
import { render, screen } from '#testing-library/react'
import {BrowserRouter as Router } from 'react-router-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux';
import renderer from 'react-test-renderer';
import configureMockStore from "redux-mock-store";
const initialState = {counter: 'Redux User'};
const mockStore = configureMockStore();
const mStore = mockStore({});
function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return [
{
counter: state.counter + 1
},
...state
]
default:
return state
}
}
function renderC(
ui,
{
initialState,
store = createStore(reducer, initialState)
} = {}
) {
function Wrapper({ children }) {
return <Provider store={store}>{children}</Provider>
}
return render(ui, { wrapper: Wrapper })
}
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
import { mount, shallow } from 'enzyme';
const clickFn = jest.fn();
describe('My Test Suite', () => {
const component = mount(<Provider store={mStore}><Router><App onClick={clickFn}/></Router> </Provider>);
it('Test App component', () => {
const changeCounter = jest.fn();
const handleClick = jest.spyOn(React, "useState");
handleClick.mockImplementation(size => [size, changeCounter]);
console.log(component.debug())
const code = component.find('code');
expect(code.text()).toBe('src/App.js');
})
it('Renders the connected app with initialState', () => {
renderC(<App />, { initialState: { counter: '123' } })
expect(screen.getByText('123')).toBeInTheDocument()
})
});```