Can't test using testing library

[guilhermeccrz]

I want to test a upload response using react dropzone upload and testing-library, but i can't. When i try to use userEvent.upload, react dropzone breaks.

 render(<View/>);

        await new Promise((r) => setTimeout(r, 500));

        const infos = within(screen.getByTestId('infos'));
        await waitFor(() => expect(infos.getByText('R$ 2.400,00')).toBeInTheDocument());

        const uploadForm = screen.getAllByTestId('upload-form');
        fireEvent.drop(uploadForm[3], {
            dataTransfer: {
                files: [new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' })]
            }
        });

        await waitFor(() =>
            expect(screen.getByText('chucknorris.jpg enviado com sucesso!')).toBeInTheDocument()
        );

Open Proposal - Upload Files › test document upload success for holerite

TypeError: URL.createObjectURL is not a function

  at node_modules/react-dropzone-uploader/dist/react-dropzone-uploader.js:14:15637

[easynowbaby]

I'm having the same problem, any solutions?

[chrismatheson]

@easynowbaby I believe this is a limitation of the jest testing environment (assuming that what your using) jsdom/jsdom#1721 which does not implement these methods.

I did a small work around like so

URL.createObjectURL = jest.fn();
URL.revokeObjectURL = jest.fn();

however I also am noticing some other errors TypeError: t.scroll is not a function which have to do with (probably) jsdom vs real browser differences.

[nihalvaria]

I solved the TypeError: t.scroll is not a function issue, with the following :

  const defaultDivScroll = window.HTMLDivElement.prototype.scroll;

  beforeEach(() => {
    window.HTMLDivElement.prototype.scroll = jest.fn();
  });

  afterEach(() => {
    window.HTMLDivElement.prototype.scroll = defaultDivScroll;
  });

I used HTMLDivElement because I spread my dropzoneProps over div element :

    <div {...dropzoneProps}>
      {input}
      {previews}
      {submitButton}
    </div>