Reactjs 如何使用React测试库粘贴剪贴板数据？

我正在尝试将剪贴板中已经存在的文本粘贴到文本框中，但我不知道如何使用“eventInit”来完成此操作。我已经阅读了关于如何将文本粘贴到文本框中的文档，但不清楚如何使用eventInit

如何使用userEvent将剪贴板中的文本粘贴到文本框中

这是我的代码：

test('Copy id button copies correct id', async () => {
  const { getAllByLabelText, debug, getByText } = render(
    <MockedProvider mocks={mocks} addTypename={false}>
      <History />
    </MockedProvider>
  );

  const textbox = <input type="text" />;
  
  await waitFor(() => new Promise((resolve) => setTimeout(resolve, 0)));

  const button = getAllByLabelText('click to copy id')[0];
  fireEvent.click(button);
  // userEvent.paste(textbox,_,) unsure what to do here...
});

test（'copyid按钮复制正确的id'，async（）=>{
const{getAllByLabelText，debug，getByText}=render(
);
常量文本框=；
等待waitFor（（）=>newpromise（（解析）=>setTimeout（解析，0））；
const button=getAllByLabelText（'单击以复制id'）[0]；
fireEvent。单击（按钮）；
//粘贴（文本框，…）不确定在此处执行什么操作。。。
});

:

---

userEvent.paste对您没有帮助：它用于测试当用户将一些文本粘贴到输入中时会发生什么情况。React测试库实际上并没有一个剪贴板来保存复制的值

我要做的是：


模拟“复制到剪贴板”函数，这样您的测试只需检查当用户单击按钮时是否调用了正确的函数
为“复制到剪贴板”功能编写一个单独的单元测试（如果有意义，您必须模拟许多浏览器API，以便手动测试有意义）

如果您确实想测试复制到剪贴板是否有效，则需要编写一个运行实际浏览器的端到端测试。至少Cypress提供了读取剪贴板内容的API。
另一个选项是执行以下操作

test（'粘贴触发返回剪贴板数据的onPaste事件'，（）=>{
const pasted=jest.fn（（）=>null）；
const changed=jest.fn（（）=>null）；
渲染(
);
const phonenumberrelation=screen.queryByTestId（'paste-input'）；
常量粘贴=createEvent.paste（PhoneNumberRelation{
剪贴簿数据：{
getData:（）=>“123456”，
},
});
fireEvent（PhoneNumberRelation，粘贴）；
expect（粘贴）.tohavebeencall（）；
期望（粘贴）。与（'123456'）合并；
});

我在上面写了一篇帖子-
你能提供你的
拷贝到剪贴板吗
代码？你不需要设置粘贴内容的输入；只需在您正在测试的按钮内模拟您正在调用的函数，并使用id值检查它是否正在被调用，类似于此问题，您不需要粘贴剪贴板，并且您可以假设模拟文本作为剪贴板文本
userEvent.paste（getByRole（'textbox'，{name:/paste your greeting/i}），text）
意味着将剪贴板文本模拟到目标文本框中。在这个粘贴操作之后，你可以检查目标文本框的内容是否有模拟文本。真棒的文章！尽管我强烈建议切换到基于函数的组件，而不是传统的基于类的组件，尤其是现在我们可以访问钩子了。它不那么冗长，更简单，而且是一种更现代/通用的方法。这里有几篇关于如何/为什么这样做的文章（这里有一篇随机文章-）