如何在Testing-Library中模拟DataTransfer对象以测试React组件的粘贴事件

你遇到的问题核心在于Jest的运行环境是Node.js，而Node环境中并没有浏览器原生的DataTransfer API，所以直接实例化DataTransfer或者依赖全局对象会报错。下面给你几个最实用的解决方案，按推荐程度排序：

1. 直接使用user-event的paste方法（最省心） #

@testing-library/user-event的paste方法其实已经内置了剪贴板数据的模拟逻辑，不需要你手动创建DataTransfer对象，直接传入要粘贴的文本就行：

import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('组件正确处理粘贴事件', async () => {
  // 初始化user-event
  const user = userEvent.setup();
  // 获取你的输入组件（这里假设是文本框，根据实际情况调整选择器）
  const inputElement = screen.getByRole('textbox');
  // 准备测试用的剪贴板文本
  const testClipboardText = '我是粘贴的内容';

  // 执行粘贴操作
  await user.paste(inputElement, testClipboardText);

  // 这里添加你的断言，比如检查组件状态是否更新，或者UI是否正确渲染
  // 示例：如果parseAndUpdateState会更新某个显示内容，可以断言该内容存在
  expect(screen.getByText(testClipboardText)).toBeInTheDocument();
});

这种方式完全不需要关心DataTransfer的实现，user-event会帮你处理好事件对象里的clipboardData细节。

2. 手动Mock最小化的ClipboardData对象（适合自定义场景） #

如果你需要更精细地控制剪贴板的行为（比如验证getData的调用参数），可以直接构造一个满足你的pasteHandler需求的mock对象，不用完整实现DataTransfer类：

import { screen, fireEvent } from '@testing-library/react';
// 如果parseAndUpdateState是可mock的，也可以引入并mock它
import { parseAndUpdateState } from './your-component-file';

jest.mock('./your-component-file', () => ({
  ...jest.requireActual('./your-component-file'),
  parseAndUpdateState: jest.fn(),
}));

test('粘贴事件正确调用剪贴板getData', () => {
  const inputElement = screen.getByRole('textbox');
  const testText = '测试文本';
  // 构造mock的clipboardData，只实现我们需要的getData方法
  const mockClipboardData = {
    getData: jest.fn().mockReturnValue(testText),
  };

  // 触发paste事件，传入包含mock clipboardData的事件对象
  fireEvent.paste(inputElement, { clipboardData: mockClipboardData });

  // 验证getData是否被正确调用
  expect(mockClipboardData.getData).toHaveBeenCalledWith('text');
  // 验证处理函数是否拿到了正确的文本
  expect(parseAndUpdateState).toHaveBeenCalledWith(testText);
});

这种方式的好处是只mock必要的方法，避免了全局定义DataTransfer可能带来的副作用。

3. 全局Mock DataTransfer类（适合多个测试复用） #

如果你的多个测试都需要用到DataTransfer，可以在Jest的全局配置文件（比如setupFilesAfterEnv.js）里定义一个简化版的DataTransfer类：

// setupFilesAfterEnv.js
global.DataTransfer = class DataTransfer {
  constructor() {
    this._data = new Map();
  }

  getData(format) {
    return this._data.get(format) || '';
  }

  setData(format, data) {
    this._data.set(format, data);
  }

  // 如果需要其他方法（比如clearData），可以按需添加
};

之后在测试里就可以正常实例化DataTransfer了：

test('使用全局mock的DataTransfer', async () => {
  const user = userEvent.setup();
  const inputElement = screen.getByRole('textbox');
  const clipboardData = new DataTransfer();
  clipboardData.setData('text', '全局mock的文本');

  await user.paste(inputElement, clipboardData);

  // 断言逻辑...
});

不过这种方式不如前两种简洁，除非你有大量测试需要完整的DataTransfer功能，否则不推荐。

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