Preventing paste works on browser but not during the test

[ematipico]

• react-testing-library version: 5.2.0
• react version: 16.7.0
• node version: 16.7.0
• npm (or yarn) version: npm

Relevant code or config:

Sandbox: https://codesandbox.io/s/40nwnrv650

What you did:

Preventing the paste functionality on a single input. Used the evt.preventDefault().

What happened:

The input sets the value

Reproduction:

Sandbox: https://codesandbox.io/s/40nwnrv650

Problem description:

When pasting on the input, the value should not be set

Suggested solution:

N/A

[weyert]

I would assume the event handling in jsdom is off?

[ematipico]

Hey @weyert, could you please be more specific? In my environment I just run

jest --env=jsdom

I don't do anything fancy with jsdom. Should I add some particular configuration?

[weyert]

I am assuming that jsdom doesn't have proper support for paste-event or it's doesn't taking your event.preventDefault() into account

[kentcdodds]

Closing this for inactivity. If someone wants to work on it in the future feel free to open a new issue. Thanks!

[alexblack]

I'm hitting this too. When I try to use fireEvent then the input never gets the pasted value applied. When I try to use userEvent.paste, e.preventDefault() doesn't prevent the input from getting the pasted value applied.

[alexblack]

I think this is a working solution:

const paste = (input: HTMLElement, value: string) => {
  const unpreventedDefault = fireEvent.paste(input, {
    clipboardData: {
      getData: () => value,
    },
  });
  if (unpreventedDefault) {
    fireEvent.change(input, { target: { value } });
  }
};