reactjs - 如何使用 React 测试库粘贴剪贴板数据?

标签 reactjs unit-testing testing integration-testing 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...
});
Documentation :
Documentation

最佳答案

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

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

关于reactjs - 如何使用 React 测试库粘贴剪贴板数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66144715/

相关文章:

javascript - HTTP 响应中缺少 react-admin

reactjs - 使用 Jest 和 Enzyme 测试 React 组件。错误 : Can't read property of map is undefined

java - 使用 junit @Rule、expectCause() 和 hamcrest 匹配器

java - 使用测试类覆盖 src 类以进行 java 单元测试

maven - 从多模块 Maven 项目构建单个 fat jar - 包括测试类

ReactJS 组件内的 AngularJS 应用程序?

javascript - `this` 在作为 react 组件 Prop 调用时在对象方法上未定义

c# - 使用 nUnit 和 nMocks 进行单元测试

java - 跳过的测试不会在 ExtentReport4 中记录为“已跳过”

javascript - Angular 用户界面/ Bootstrap : Testing a controller that uses a dialog