React Js – Enzyme test if setState is triggered

I am using enzyme to test my react application. This is my react component:

import React from 'react';

const Child = ({name, setName}) => {
    return (
        <div>
            <button onClick={() => setName('test')}>setName</button>
            <h2>Name: {name}</h2>
        </div>
    );
};

export default Child;

By clicking the button i change the setName which is passed as bellow:

function App() {
    const [name, setName] = useState();
    return (
        <div className="App">
            <Child setName={setName} name={name}/>
        </div>
    );
}

export default App;

So, testing Child component i created the next test to test when user clicks the button should trigger setName.

describe('Should test Child component', () => {
    const wrapper = (props) => shallow(<Child {...props}/>)
   
    test('should trigger setName', () => {
        const mockFun = jest.fn()
        const r = wrapper({setName: jest.fn() });
        const btn = r.find('button');
        btn.simulate('click');
        expect(r.props().setName).toHaveBeenCalled()
    })
})

Running the test i get:

Error: expect(received).toHaveBeenCalled()

Matcher error: received value must be a mock or spy function

Received has value: undefined

Why i get this error and how to make my test to be valid?

Answer

I can’t test it right now but I think modifying it like this should do it

describe('Should test Child component', () => {
    const wrapper = (props) => shallow(<Child {...props}/>)
   
    test('should trigger setName', () => {
        const mockFun = jest.fn()
        const r = wrapper({setName: mockFun });
        const btn = r.find('button');
        btn.simulate('click');
        expect(mockFun).toHaveBeenCalled()
    })
})

Also see this one as a reference same issue How to test onClick props of a button using Jest and Enzyme