javascripttesting-library

How to copy/paste in @testing-library/user-event 14?

In @testing-library/user-event 13, it was sort of trivial with:

paste(element, text, eventInit, options);

However, in 14, copy and cut was added and past now requires some kind of pointer selection which is not clear from the documentation how it should work now. I have tried looking into the library's tests to see how it is used, but tests rely on a private setup that makes it harder to see what's needed for this case in specific.

To the point of my question, how one would port the paste example from @testing-library/user-event 13 into @testing-library/user-event 14?

Solution

  • It should work if you first click the element, then paste.

    Adapting the v13 example:

    test('should paste text in input', async() => {
  render(<MyInput />)

  const text = 'Hello, world!'
  const element = screen.getByRole('textbox', {name: /paste your greeting/i})
  await userEvent.click(element)
  await userEvent.paste(text)
  expect(element).toHaveValue(text)
})