Invalid attempt to spread non-iterable instance. (upload)

[otaciliolacerda]

Hello all,

My environment:

• @testing-library/user-event@12.8.1
• @testing-library/react@11.2.5
• @testing-library/jest-dom": "^5.11.9
• @jest@26.6.3
• jest-environment-jsdom@^26.6.2
• jsdom@^16.4.0
• node@14.15.4

What you did:
I am trying to use the upload function as defined in the README to upload multiple files. The code works on different browsers but I am not able to test it using @testing-library/user-event.

What happened:
When I run the example provided on the README I get:

Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

The error seems to come from:

// the event fired in the browser isn't actually an "input" or "change" event
  // but a new Event with a type set to "input" and "change"
  // Kinda odd...
  const inputFiles = {
    length: files.length,
    item: index => files[index],
    ...files,
  }

  fireEvent(
    input,
    createEvent('input', input, {
      target: {files: inputFiles},
      bubbles: true,
      cancelable: false,
      composed: true,
      ...init,
    }),
  )

  fireEvent.change(input, {
    target: {files: inputFiles}, 
    ...init,
  })

The inputFiles is not a iterable instance

Suggested solution:
Pass the file array to the event or make the inputFiles instance an iterable.

[ph-fritsche]

Could you set up a codesandbox replicating the error?

[kevinsperrine]

@otaciliolacerda Are you using another library that's inserting the file input element and then running validation on it onChange? I ran into this same issue with carbon's file uploader component, so to test it I manually triggered the events and added the iterator to the object. This allowed me to test the component as expected. 🤷‍♂️

    const files = [new File(['a'.repeat(1024)], 'pretty picture.png', { type: 'image/png' })];
    const fileInput = container.querySelector('input[type="file"]');
    const inputFiles = {
      length: 1,
      item: (index) => files[index],
      ...files,
      [Symbol.iterator]() {
        let i = 0;
        let done = false;
        return {
          next: () => {
            done = i >= files.length;
            const returnVal = {
              done,
              value: files[i],
              key: i,
            };
            i += 1;
            return returnVal;
          },
        };
      },
    };

    fireEvent(
      fileInput,
      createEvent('input', fileInput, {
        target: { files: inputFiles },
        bubbles: true,
        cancelable: false,
        composed: true,
      })
    );

    fireEvent.change(fileInput, {
      target: {
        files: inputFiles,
      },
    });

[github-actions]

🎉 This issue has been resolved in version 13.0.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀