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

IT技术 reactjs unit-testing testing integration-testing react-testing-library
2021-05-23 12:30:48

我正在尝试将剪贴板中已有的文本粘贴到文本框中，但我不明白如何使用“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...
});

文件： 文档

2个回答

另一种选择是做类似的事情

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

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

我会怎么做：

  • 模拟“复制到剪贴板”功能，因此您的测试只是检查用户单击按钮时是否调用了正确的功能
  • 为复制到剪贴板功能编写单独的单元测试（如果有意义，您必须模拟大量浏览器 API，因此手动测试才有意义）

如果您真的想测试复制到剪贴板是否有效，您需要编写一个运行实际浏览器的端到端测试。至少 Cypress 提供了 apis 来读取剪贴板的内容。

其它你可能感兴趣的问题
上一篇我可以做什么打印来测试/校准我的打印机的精度？ 下一篇delta 3d 打印机在哪一点更改 G 代码以在其非笛卡尔设计中工作？