UserEvent.paste is not working after upgrading version from 13.5.0 to 14.1.1

[Sushmasrig]

Reproduction example

const searchInput = screen.queryByTestId('querySearchInput'); const saveButton = screen.queryByTestId('editSaveButton'); expect(searchInput).toBeInTheDocument(); // Need to do this overtly to enable edit mode user.click(searchInput); expect(localQuerByText(errorText)).not.toBeInTheDocument(); user.paste(searchInput, longQueryText); expect(saveButton).toBeDisabled();

Prerequisites

When a user tries to paste text, the paste event is not working as expected with an updated version. Input return null value instead of pasted text.

` it('Disables Save button in edit mode if text is over limit', async () => {
const errorText =
'The query size is too big. Please reduce your string.';

            const searchInput = screen.queryByTestId('querySearchInput');
            const saveButton = screen.queryByTestId('editSaveButton');

            expect(searchInput).toBeInTheDocument();

            // Need to do this overtly to enable edit mode
            user.click(searchInput);
            expect(localQuerByText(errorText)).not.toBeInTheDocument();
            user.paste(searchInput, longQueryText);
            expect(saveButton).toBeDisabled();

})`

Node version: v14.18.1
NPM version: 6.14.15
"react": "^18.0.0",
"@testing-library/dom": "^8.13.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^14.1.1",

Expected behavior

userEvent.paste should paste text instead of giving a null value.

Actual behavior

It is returning null.

User-event version

14.1.1

Environment

Testing Library framework:

JS framework:

Test environment:

DOM implementation:

Additional context

No response

[ph-fritsche]

The code "formatting" in your post makes it really hard to read. Please try to write proper Markdown next time.

Anyway, here is the solution:

14.0.0 (2022-03-29)

⚠ BREAKING CHANGES

• APIs always return a Promise.

https://testing-library.com/docs/user-event/intro/#writing-tests-with-userevent

[laboriosi]

I have the same question and I reread the entire documentation and I couldn't find a solution.

In version 13, when I wanted to paste something into a specific input I would do:

import userEvent from '@testing-library/user-event'
import { screen } from '@testing-library/react'
import Screen from '..'

it('should paste', () => {
  render(<Screen />)
    
  userEvent.paste(screen.getByRole('textbox'), '1234')
})

But in version 14 it is not clear how this can be done, as now paste no longer receives the element

[ph-fritsche]

I have the same question

@laboriosi The author of the issue didn't have that question, but forgot to await the Promise.

Please don't resurrect false bug reports for questions.

There is a Q&A section in the Discussions.
A post there might help others who have the same problem.

[lorenz068]

I have the same question and I reread the entire documentation and I couldn't find a solution.

In version 13, when I wanted to paste something into a specific input I would do:

import userEvent from '@testing-library/user-event'
import { screen } from '@testing-library/react'
import Screen from '..'

it('should paste', () => {
  render(<Screen />)
    
  userEvent.paste(screen.getByRole('textbox'), '1234')
})

But in version 14 it is not clear how this can be done, as now paste no longer receives the element

The paste method has changed

it('should paste', () => {
  render(<Screen />)
  screen.getByRole('textbox').focus()
  userEvent.paste('1234')
})

Source #785

[iamdench]

also you can use click instead of focus, if you have problem with focus:

const textbox = screen.getByRole('textbox');
userEvent.click(textbox);
userEvent.paste('1234');