如何使用 React 测试库粘贴剪贴板数据？
Noo*_*oob 10 testing integration-testing unit-testing reactjs react-testing-library
我正在尝试将剪贴板中已有的文本粘贴到文本框中，但我不明白如何使用“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...
});
文件：
Dav*_*010 10
另一种选择是做类似的事情
test('Pasting fires onPaste event which returns clipboard data', () => {
const pasted = jest.fn(() => null);
const changed = jest.fn(() => null);
render(
<PasteComponent paste={pasted} changeEvent={changed} data-testid='paste-input' />);
const PhoneNumberElement = screen.queryByTestId('paste-input');
const paste = createEvent.paste(PhoneNumberElement, {
clipboardData: {
getData: () => '123456',
},
});
fireEvent(PhoneNumberElement, paste);
expect(pasted).toHaveBeenCalled();
expect(pasted).toHaveBeenCalledWith('123456');
});
我写了一篇关于它的文章 - https://medium.davidendersby.me/2-ways-to-trigger-the-onpaste-event-with-testing-library-1502c5fdb9e
- 很棒的文章！尽管我强烈建议切换到基于函数的组件，而不是基于旧类的组件，特别是现在我们可以访问钩子。它更简洁、更简单，并且是一种更现代/更常见的处理方法。有几篇关于如何/为什么这样做的文章（这是随机的一篇 - https://dev.to/danielleye/react-class-component-vs-function-component-with-hooks-13dg） (2认同)
userEvent.paste对您没有帮助：它适用于测试用户将某些文本粘贴到输入中时发生的情况。React 测试库实际上没有一个剪贴板来保存复制的值。
我会做什么：
- 模拟“复制到剪贴板”功能，因此您的测试只是检查用户单击按钮时是否调用了正确的函数
- 为复制到剪贴板功能编写一个单独的单元测试（如果有意义，您必须模拟大量浏览器 API，因此手动测试才有意义）
如果您确实想测试复制到剪贴板是否有效，则需要编写运行实际浏览器的端到端测试。至少 Cypress 提供了读取剪贴板内容的 API。