testing-library / testing-library/user-event

@testing-library/user-event paste() method fails when using happy-dom, works with jsdom

Open
#1,167 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug needs assessment
Dominant language
TypeScript
Stars
2.3k
Forks
258
PR merge metrics
No merged PRs in 30d

Description

Reproduction example

https://github.com/sethreidnz/testing-library-happy-dom-paste-issue

Prerequisites
  1. Clone repository
  2. Install dependencies npm install or yarn install
  3. Run the tests npm run test or yarn test
  4. See error message in console that will look like the following:
FAIL  src/App.test.tsx > App > can paste in input
TypeError: dt.setData is not a function
 ❯ getClipboardDataFromString node_modules/@testing-library/user-event/dist/esm/clipboard/paste.js:25:8
 ❯ Object.paste node_modules/@testing-library/user-event/dist/esm/clipboard/paste.js:16:70
 ❯ node_modules/@testing-library/user-event/dist/esm/setup/setup.js:84:35
 ❯ Object.asyncWrapper node_modules/@testing-library/react/dist/pure.js:73:28
 ❯ wrapAsync node_modules/@testing-library/user-event/dist/esm/setup/wrapAsync.js:7:24
 ❯ Object.method [as paste] node_modules/@testing-library/user-event/dist/esm/setup/setup.js:84:16
 ❯ src/App.test.tsx:15:16
     13|     // assert
     14|     await user.click(screen.getByRole('textbox'));
     15|     await user.paste('Hello, world!');
       |                ^
     16|   });
     17| });
Expected behavior

The paste() method should work the same as in jestdom and not produce an error.

Actual behavior

user.paste() produces a type error when using happy-dom.

User-event version

14.5.1

Environment

Testing Library framework:

JS framework: react@18.2.15

Test environment: vitest@20.34.4

DOM implementation: happy-dom@12.1.2 -->

Additional context

I am not sure if this is an issue with testing library or with happy-dom so I have also raised an issue there too:

https://github.com/capricorn86/happy-dom/issues/1077

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Run the linked reproduction with its npm test command and confirm the failure in src/App.test.tsx. Inspect the reported clipboard/paste.js entry point and compare behavior between happy-dom and jsdom, while checking the linked happy-dom issue for ownership. Done means user.paste() completes without the TypeError under happy-dom and the behavior is covered by a regression test.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.