title: How to pass mock event to the react element that React.cloneElement() method returned
body: <p><code>index.ts</code>:</p>
  <pre><code>import React, { ChangeEvent, cloneElement, Component, isValidElement } from 'react';
  
  interface MyComponentProps {
    children?: React.ReactNode;
  }
  
  export default class MyComponent extends Component&lt;MyComponentProps&gt; {
    render() {
      const { children } = this.props;
  
      const items = React.Children.map(children, (element, index) =&gt; {
        if (!isValidElement(element)) {
          return element;
        }
        return cloneElement(element, {
          key: index,
          onChange: (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
            element.props.onChange &amp;&amp; element.props.onChange(e);
            // do other things
            console.log('handle change event');
          },
        });
      });
      return &lt;div&gt;{items}&lt;/div&gt;;
    }
  }
  </code></pre>
  <p><code>index.test.ts</code>:</p>
  <pre><code>import { mount } from 'enzyme';
  import React, { ChangeEvent } from 'react';
  import MyComponent from '.';
  
  class Test extends React.Component&lt;{ onChange?: (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void }&gt; {
    render() {
      return &lt;input {...this.props} /&gt;;
    }
  }
  
  describe('react-cloneElement-enzyme-change-event', () =&gt; {
    it('should handle change event', () =&gt; {
      const onChange = jest.fn();
      const wrapper = mount(
        &lt;MyComponent&gt;
          &lt;Test onChange={onChange} /&gt;
          &lt;Test /&gt;
        &lt;/MyComponent&gt;
      );
      const input = wrapper.find('div').children().at(0).find('input');
      // expect(jest.isMockFunction(input.prop('onChange'))).toBeTruthy(); // failed
      const event = {} as ChangeEvent&lt;HTMLInputElement&gt;;
      input.simulate('change', event);
      expect(onChange).toBeCalled();
      expect(onChange).toBeCalledWith({}); // failed. The actual value is React synthetic event object
    });
  });
  </code></pre>
  <p>This assertion <code>expect(onChange).toBeCalledWith({});</code> failed. I found that after executing <code>cloneElement</code>, the <code>onChange</code> event handler on <code>input</code> has been replaced with non-mock <code>onChange: () =&gt; {}</code></p>
  <p>So even if the mock event object is passed when the <code>input.simulate('change', event)</code> is executed, the <code>onChange</code> event handler is passed the React synthetic event object, NOT the mock event.</p>
  <p>How can I pass the mock event object to the <code>onChange</code> of the cloned element?</p>
  <p>package versions:</p>
  <pre class="lang-json prettyprint-override"><code>&quot;enzyme&quot;: &quot;^3.11.0&quot;,
  &quot;enzyme-adapter-react-16&quot;: &quot;^1.15.5&quot;,
  &quot;jest&quot;: &quot;^26.6.3&quot;,
  &quot;react&quot;: &quot;^16.14.0&quot;,
  </code></pre>
  <p>Minimal, reproducible example repo: <a href="https://github.com/mrdulin/jest-v26-codelab/tree/main/issues/react-cloneElement-enzyme-change-event" rel="nofollow noreferrer">https://github.com/mrdulin/jest-v26-codelab/tree/main/issues/react-cloneElement-enzyme-change-event</a></p>