How to write test cases in enzyme and jest for a component using useDropZone?

Question

How to write test case for a component like this? Simulation of onChange or onClick function does not add any files.

import React from 'react';
import {useDropzone} from 'react-dropzone';

function Basic(props) {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
  
  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <section className="container">
      <div data-testid="dropDiv" {...getRootProps({className: 'dropzone'})}>
        <input data-testid="dropInput" {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

Answer 1

Testing the behavior of the component. There is an example about testing at the bottom of the official doc. The react-testing-library is recommended to use for react-dropzone.

You can create mock files and simulate the drop event on the drop zone. Then assert what does the component render.

E.g.

index.tsx:

import React from 'react';
import { useDropzone, FileWithPath } from 'react-dropzone';

export function Basic(props) {
  const { acceptedFiles, getRootProps, getInputProps } = useDropzone();

  const files = acceptedFiles.map((file: FileWithPath) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <section className="container">
      <div {...getRootProps({ className: 'dropzone' })}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

index.test.tsx:

import { act, fireEvent, waitFor, render } from '@testing-library/react';
import React from 'react';
import { Basic } from './';

async function flushPromises(rerender, ui) {
  await act(() => waitFor(() => rerender(ui)));
}

function dispatchEvt(node, type, data) {
  const event = new Event(type, { bubbles: true });
  Object.assign(event, data);
  fireEvent(node, event);
}

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

describe('71585833', () => {
  test('should pass', async () => {
    const file = new File([JSON.stringify({ ping: true })], 'ping.json', { type: 'application/json' });
    const data = mockData([file]);
    const { container, rerender } = render(<Basic />);
    const dropzone = container.querySelector('div');
    dispatchEvt(dropzone, 'drop', data);
    await flushPromises(rerender, <Basic />);

    expect(container.querySelectorAll('li')).toHaveLength(1);
    expect(container.querySelectorAll('li')[0].textContent).toEqual('ping.json - 13 bytes');
  });
});

Test result:

 PASS  stackoverflow/71585833/index.test.tsx (9.766 s)
  71585833
    ? should pass (41 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        10.794 s