如何在@testing-library/user-event 14中实现复制粘贴？及v13代码迁移

v14版本的@testing-library/user-event核心变化是更贴近真实用户的操作流程，粘贴操作不再是直接给paste方法传目标元素和文本，而是需要模拟用户先聚焦元素、再执行粘贴的完整流程。

迁移步骤与代码示例 #

v13原代码

paste(element, text, eventInit, options);

v14迁移后的代码

注意：v14的所有交互方法都是异步的，必须配合async/await使用，且推荐先通过userEvent.setup()创建用户实例。

方式一：模拟完整的复制+粘贴流程（贴近真实用户行为）

import userEvent from '@testing-library/user-event';

// 创建用户操作实例
const user = userEvent.setup();

// 1. 聚焦目标元素（模拟用户点击激活输入框/可编辑区域）
await user.click(targetElement);

// 2. 模拟用户先复制需要粘贴的内容（将文本写入剪贴板）
await user.copy('要粘贴的文本内容');

// 3. 执行粘贴操作
await user.paste();

方式二：直接指定粘贴文本（跳过复制步骤，适用于测试场景）

如果不需要模拟复制流程，只想直接往目标元素粘贴指定文本，可以通过配置对象传递文本：

import userEvent from '@testing-library/user-event';

const user = userEvent.setup();

// 先聚焦目标元素
await user.click(targetElement);

// 直接粘贴指定文本
await user.paste({ text: '要粘贴的文本内容' });

关键变化说明 #

• v14的paste方法不再接收目标元素作为第一个参数，而是默认对当前已聚焦的元素执行粘贴
• 所有操作必须异步执行，因此要加上await
• 如果需要自定义事件属性（比如bubbles、cancelable），可以在paste的配置对象中添加：

  await user.paste({
    text: 'test',
    eventInit: { bubbles: true, cancelable: false }
  });
  

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