Testing with react testing library (rtl)

[tomtobac]

As read in the readme.md I am not able to make a successful test of react-dropzone with onDrop callback from useDropzone. I tried with the dragEnter | dragStart | ... event(s) but it doesn't trigger the callback.
Any suggestions?

E.g.:

function mockData(files: File[]) {
  return {
    dataTransfer: {
      files,
      items: files.map((file) => ({
        kind: 'file',
        type: file.type,
        getAsFile: () => file,
      })),
      types: ['Files'],
    },
  };
}

const Test = ({ fn }: { fn: VoidFunction }) => {
  const { getInputProps, getRootProps } = useDropzone({
    onDrop: fn,
  });
  return (
    <div role="presentation" {...getRootProps}>
      <input {...getInputProps} />
    </div>
  );
};

it('should trigger onDrop fn', async () => {
  const user = userEvent.setup();
  const mockFn = vi.fn();
  render(<Test fn={mockFn} />);

  const file = new File(['test1,test2'], 'test.csv', { type: 'text/csv' });
  const dropzone = screen.getByRole('presentation');
  const data = mockData([file]);

  fireEvent.drop(dropzone, data);
  /* 
  fireEvent.dragEnd(dropzone, data);
  fireEvent.dragEnter(dropzone, data);
  fireEvent.dragExit(dropzone, data);
  fireEvent.dragStart(dropzone, data);
  fireEvent.dragLeave(dropzone, data);
  fireEvent.dragOver(dropzone, data);
  fireEvent.drag(dropzone, data);
  */

  expect(mockFn).toBeCalled();
});

[tomtobac]

Sorry, it can be closed. I found the mistake:

const Test = ({ fn }: { fn: VoidFunction }) => {
  const { getInputProps, getRootProps } = useDropzone({
    onDrop: fn,
  });
  return (
    <div role="presentation" {...getRootProps}> {/* <---- it's a function, typescript won't complain and it should be called {...getRootProps() */}
      <input {...getInputProps} /> {/* <---- it's a function, typescript won't complain and it should be called {...getInputProps()} */}
    </div>
  );
};

Also in my test im not awaiting basically because typescript complains about it (not necessary) and I remove it. Same with act. If you ignore this warning it should work.

await act(() => fireEvent.drop(dropzone, data));