Jest Enzyme How to update child props - reactjs

Question

I need to mutate React child component's prop which receives parents' function.
After updating the wrapper's function it changes but not affect to child component
// Component
import React from 'react';
export default class Component extends React.Component {
clickFunction() {
console.log("Parent's Click fn");
}
render() {
return (
<div>
<Button onClick={this.clickFunction} data-test-id="button" />
</div>
);
}
}
// Test
import React from 'react';
import {shallow} from 'enzyme';
const mockClickFunction = jest.fn(() => console.log('Mock Click fn'));
describe('Test Component', () => {
it('Should mutate child prop', () => {
const wrapper = shallow(<Component />);
wrapper.find('[data-test-id="button"]').simulate('click') // Parent's Click fn
console.log(wrapper.instance().clickFunction) // [Function: bound clickFunction]
wrapper.instance().clickFunction = mockClickFunction;
wrapper.update();
console.log(wrapper.instance().clickFunction) // [Function: mockConstructor]
wrapper.find('[data-test-id="button"]').simulate('click') // Parent's Click fn but should be Mock Click fn
})
})
How I can change child Component onClick function?

Answer 1

A reference to the original clickFunction has been used in the render. You can't mock it by overriding it after the component is already shallow-rendered.
Try spying on Component.prototype.clickFunction before calling shallow.
E.g.
index.jsx:
import React from 'react';
export default class Component extends React.Component {
clickFunction() {
console.log("Parent's Click fn");
}
render() {
return (
<div>
<button onClick={this.clickFunction} data-test-id="button" />
</div>
);
}
}
index.test.tsx:
import { shallow } from 'enzyme';
import React from 'react';
import Component from '.';
describe('55611882', () => {
it('should pass', () => {
const mockClickFunction = jest
.spyOn(Component.prototype, 'clickFunction')
.mockImplementation(() => console.log('Mock Click fn'));
const wrapper = shallow(<Component />);
wrapper.find('[data-test-id="button"]').simulate('click');
expect(mockClickFunction).toBeCalledTimes(1);
mockClickFunction.mockRestore();
});
});
test result:
PASS examples/55611882/index.test.jsx (13.099 s)
55611882
✓ should pass (81 ms)
console.log
Mock Click fn
at examples/55611882/index.test.jsx:9:41
-----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files | 75 | 100 | 50 | 75 |
index.jsx | 75 | 100 | 50 | 75 | 5
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 15.416 s