How to properly mock `antd` Upload Dragger with jest?

I have the following react code in my project

<Dragger
  accept={ACCEPTED_FORMATS}
  beforeUpload={beforeUpload}
  data-testid="upload-dragger"
  maxCount={1}
  onChange={({ file: { status } }) => {
    if (status === 'done') onUploadComplete();
  }}
  progress={progress}
  showUploadList={false}
>
{/* here i have a button, code ommited for clarity, if needed i'll post it */}
</Dragger>

And I want to test if the callback function onUploadComplete() was called when file.status is 'done'.

Here is how i am doing the test right now:

it('completes the image upload', async () => {
  const { getByTestId } = render(elementRenderer({ onUploadComplete }));

  const file = new File(
    [new ArrayBuffer(1024 * 1024 * (IMAGE_MAX_SIZE_IN_MB - 1))],
    'test.png',
    {
      type: 'image/png',
    },
  );

  const uploadDragger = await waitFor(() => getByTestId('upload-dragger'));

  fireEvent.change(uploadDragger, { target: { files: [file] } });

  expect(onUploadComplete).toHaveBeenCalled();
});

This test won't work because the upload is never really completed. However, to make the upload complete i had the idea of mocking the antd Upload/Dragger and make a kind of dummy request. The following code shows this process:

jest.mock('antd', () => {
  const antd = jest.requireActual('antd');
  const { Upload } = antd;
  const { Dragger } = Upload;

  const dummyRequest = ({ file, onSuccess }) => {
    setTimeout(() => {
      onSuccess('ok');
    }, 0);
  };

  const MockedDragger = () => {
    console.log('render mock');
    return <Dragger customRequest={dummyRequest} />;
  };

  return { ...antd, Upload: { ...Upload, MockedDragger } };
});

But this also do not work. Actually, it never renders the mockedDragger component as I don't get the console.log message that was printed for debugging purposes.

Any tips on how to proceed? I have already seen this issue and didn’t help.

from How to properly mock `antd` Upload Dragger with jest?