如何模拟测试库的 DataTransfer 项目

Question

我正在尝试使用 Testing-library user-event paste 测试 React 组件的 onPaste 事件处理程序。

事件处理程序：

pasteHandler = (event: any) => {
    const text = event.clipboardData.getData("text");
    parseAndUpdateState(text);
}

如果我尝试 const clipboardData = new DataTransfer(); 或提到的全局模拟 here 我得到：Error: Uncaught [ReferenceError: DataTransfer is not defined].

无论我如何尝试定义模拟笑话对象或创建我自己的定义，我都会收到缺少 dataTransfer 对象或缺少字段的错误。

我是否遗漏了如何模拟 DataTransfer 对象，我只需要获取剪贴板数据？

Answer 1

找到Article from

我错过了 createEvent 的文档，在将其与

一起使用后

  const PhoneNumberElement = screen.queryByTestId('paste-input');

  const paste = createEvent.paste(PhoneNumberElement, {
    clipboardData: {
      getData: () => '123456',
    },
  });

  fireEvent(PhoneNumberElement, paste);

如文章中所述，我能够粘贴并触发 onPaste 处理程序。

如何模拟测试库的 DataTransfer 项目

How do I mock a DataTransfer item for testing-library

javascript

unit-testing

reactjs

jestjs

testing-library