CODEWITHSUNDEEP
reactjsvitestreact-dropzonestl-format
Jasperan
Jasperan

Reputation: 3806

react-dropzone onDrop is not triggered programmatically when using unaccepted file type

I'm using react-dropzone in my React project, and I have it set up to only accept .stl and .zip files. Currently I'm testing other file types to ensure that an error is shown when the user uploads an unaccepted file. When I upload a pdf file manually, the onDrop function is triggered, sets the error message, and returns which is the correct behavior. Here is my onDrop function

const { getRootProps, getInputProps, open } = useDropzone({
  accept: {
    "model/stl": [".stl", ".zip"],
  },
  noClick: true,
  noKeyboard: true,
  onDrop: async (acceptedFiles) => {
    if (acceptedFiles.length === 0) {
      setUploadFileErrorMsg("Please upload the correct file type");
      return;
    }
  //...Rest of the onDrop logic
}

The problem is the onDrop function is not being triggered in my unit tests. Here's the relevant test (I'm using vitest):

it('should display error when an unaccepted file is dropped', async () => {
  const { getByTestId, getByText } = render(<Create />);
  const dropInput = getByTestId('drop-input');

  // Create a Blob that looks like a PDF file.
  const file = new File(['(⌐□_□)'], 'chucknorris.pdf', { type: 'text/plain' });

  userEvent.upload(dropInput, [file]);

  await waitFor(() => {
    expect(getByText('Please upload a .stl file or a .zip file containing .stl files')).toBeInTheDocument();
  });
});

When I change the file type in the test to .stl, onDrop is triggered. Why is onDrop triggered for pdf files when dropped manually, but is not triggered when running the unit test?

Upvotes: 0

Views: 154

Answers (0)

Related Questions