An update to Dropzone inside a test was not wrapped in act(...).

What is the current behavior?

When trying to test a component containing Dropzone, there’s a console.errror (but tests pass):

console.error node_modules/react-dom/cjs/react-dom.development.js:506
  Warning: An update to Dropzone inside a test was not wrapped in act(...).
  
  When testing, code that causes React state updates should be wrapped into act(...):
  
  act(() => {
    /* fire events that update state */
  });
  /* assert on the output */
  
  This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
      in Dropzone (at InputFile.js:86)
      in div (at InputFile.js:85)
      in InputFile (at InputFile.test.js:68)

Test example which triggers the error:

import { render, act } from '@testing-library/react';

describe('InputFile', () => {
  it('example', async () => {
    act(() => {
      const rendered = render(<InputFile {...props} />);
    });
  });
});

InputFile is:

class InputFile extends React.Component {
  onDrop = () => { /*…*/ }

  render() {
    return (
      <Dropzone
        onDrop={this.onDrop}
      >
        {({ getRootProps, getInputProps }) => {
          if (uploading) {
            return <div>...uploading</div>;
          }

          return (
            <div {...getRootProps()}>
              <input {...getInputProps()} />
            </div>
          );
        }}
      </Dropzone>
    );
  }
}

[MaximeConan]

@alex-polunochev it works without await the Promise. So you don’t need to have a setTimeout.

  await act(async () => {
    fireEvent.change(input, {
        target: { files: [file] },
    })
  })

[alex-polunochev-zz]

I was testing the file upload event and got the same error, the plain component test rendering was fine.
Fixed the problem with input change by creating a Promise with short timeout:

    await act(async () => {
      // upload the file by updating the value attribute of the input
      fireEvent.change(screen.getByPlaceholderText('Browse'), {
        target: { files: [file] }
      });
      await new Promise((r) => setTimeout(r, 10));
    });