如何为React中的文件拖拽功能编写Jest测试用例？

首先，建议给你的dropzone元素添加data-testid="dropzone"，方便测试时精准定位元素：

<div
  data-testid="dropzone"
  className={`dropzone ${isDragging ? "dragging" : ""}`}
  onDragEnter={handleDragEnter}
  onDragLeave={handleDragLeave}
  onDragOver={handleDragOver}
  onDrop={handleDrop}
>

以下是完整的测试用例代码（假设组件文件名为FileUploadDropzone.js，测试文件为FileUploadDropzone.test.js）：

import { render, screen, fireEvent } from '@testing-library/react';
import FileUploadDropzone from './FileUploadDropzone';

// 测试拖拽进入时添加dragging类
test('adds "dragging" class when dragging enters the dropzone', () => {
  render(<FileUploadDropzone />);
  const dropzone = screen.getByTestId('dropzone');

  fireEvent.dragEnter(dropzone);
  expect(dropzone).toHaveClass('dragging');
});

// 测试拖拽离开时移除dragging类
test('removes "dragging" class when dragging leaves the dropzone', () => {
  render(<FileUploadDropzone />);
  const dropzone = screen.getByTestId('dropzone');

  fireEvent.dragEnter(dropzone);
  expect(dropzone).toHaveClass('dragging');

  fireEvent.dragLeave(dropzone);
  expect(dropzone).not.toHaveClass('dragging');
});

// 测试拖拽文件放下后的状态更新与文件名显示
test('resets dragging state and displays selected file name on file drop', () => {
  render(<FileUploadDropzone />);
  const dropzone = screen.getByTestId('dropzone');
  const testFile = new File(['sample content'], 'test-document.pdf', { type: 'application/pdf' });

  fireEvent.dragEnter(dropzone);
  expect(dropzone).toHaveClass('dragging');

  fireEvent.drop(dropzone, {
    dataTransfer: {
      files: [testFile]
    }
  });

  expect(dropzone).not.toHaveClass('dragging');
  expect(screen.getByText('Selected File: test-document.pdf')).toBeInTheDocument();
});

// 测试dragOver事件调用preventDefault
test('calls preventDefault on dragOver event', () => {
  render(<FileUploadDropzone />);
  const dropzone = screen.getByTestId('dropzone');
  const mockPreventDefault = jest.fn();

  fireEvent.dragOver(dropzone, { preventDefault: mockPreventDefault });
  expect(mockPreventDefault).toHaveBeenCalledTimes(1);
});

测试说明 #

• 使用fireEvent模拟拖拽相关事件，dragEnter、dragLeave、drop都可以直接通过该方法触发
• 模拟文件放下时，需要在事件参数中传入dataTransfer对象，包含模拟的文件数组
• 通过toHaveClass、toBeInTheDocument等断言方法验证组件状态和UI更新是否符合预期

内容的提问来源于stack exchange，提问作者Sandhya