user-event: TypeError: range.cloneRange is not a function after updating to v.14

Reproduction example

https://pastecode.io/s/n6p0zq9q

Prerequisites

  1. Update to user-event v.14
  2. Add async/await for tests with user-event usage.
  3. Run test

Expected behavior

Test should pass - it did with v.13.

Actual behavior

Test fails with TypeError: range.cloneRange is not a function

TypeError: range.cloneRange is not a function

  at mousedownDefaultBehavior (../../node_modules/@testing-library/user-event/dist/index.cjs:2441:32)
  at down (../../node_modules/@testing-library/user-event/dist/index.cjs:2309:7)
  at pointerPress (../../node_modules/@testing-library/user-event/dist/index.cjs:2248:19)
  at pointerAction (../../node_modules/@testing-library/user-event/dist/index.cjs:2471:33)

User-event version

14.0.4

Environment

Testing Library framework:

"@testing-library/dom": "8.12.0",
"testing-library/jest-dom": "5.16.3",
"@testing-library/react": "12.1.4",
"@testing-library/react-hooks": "7.0.2",
"@testing-library/user-event": "14.0.4",

JS framework: react@17.0.2

Test environment: jest@27.5.1

Additional context

node v.12

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 4
  • Comments: 18 (6 by maintainers)

Commits related to this issue

Most upvoted comments

I ran into the same problem.

In my case the problem was not that the environment didn’t implement Range.cloneRange() but the fact that I was overwriting it in my local test setup (global.document.createRange = () => ({ ... })), which was some code from before my test environment implemented Range. Removing that from my setup fixed the issue for me.

I am having the same issue but with createRange

      TypeError: target.ownerDocument.createRange is not a function
      at mousedownDefaultBehavior (node_modules/@testing-library/user-event/dist/index.cjs:2450:42)
      at down (node_modules/@testing-library/user-event/dist/index.cjs:2324:7)
      at pointerPress (node_modules/@testing-library/user-event/dist/index.cjs:2263:19)
      at pointerAction (node_modules/@testing-library/user-event/dist/index.cjs:2486:33)
      at node_modules/@testing-library/react/dist/pure.js:59:16

I’m also seeing the same issue w/ these versions. But note that I’m using vitest/happy-dom. Took a look at the happy-dom implementation and there are no mocks for that function. See also: https://github.com/capricorn86/happy-dom/issues/450

    "@testing-library/dom": "8.13.0",
    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/react": "^12.1.0",
    "@testing-library/user-event": "14.2.0",

I’m facing the same issue with v14. @osamajandali did you manage to solve your problem?

As far as the DOM is concerned, there seem to be only two games in town: jsdom and happy-dom.

Note: and this is a very important note, the react-testing-library team actively recommends using happy-dom… Because it is super fast.

On Jun 3, 2022 11:38 AM, Philipp Fritsche @.***> wrote:

@Zemeliahttps://github.com/Zemelia @.*** has no issue, your DOM implementation has an issue. This has nothing to do with react-dom because it does not implement the DOM - neither in @.*** nor any other version. @.*** doesn’t interact with implementations of Selection and Range, thus there is no error if you use it with a DOM implementation that doesn’t implement those interfaces.

As suggested above: Upgrade your DOM implementation or use a different one that implements those interfaces according to specs. If you have trouble identifying which part of your setup is responsible for the DOM, we’ve got a Discord serverhttps://discord.gg/testing-library where you might find someone to help you with this.

— Reply to this email directly, view it on GitHubhttps://github.com/testing-library/user-event/issues/902#issuecomment-1146162241, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAGAGMKINB4OTIK7AEYZG3LVNIYGZANCNFSM5SPJWDPQ. You are receiving this because you commented.Message ID: @.***>

@Zemelia user-event@14 has no issue, your DOM implementation has an issue. This has nothing to do with react-dom because it does not implement the DOM - neither in react-dom@17 nor any other version. user-event@13 doesn’t interact with implementations of Selection and Range, thus there is no error if you use it with a DOM implementation that doesn’t implement those interfaces.

As suggested above: Upgrade your DOM implementation or use a different one that implements those interfaces according to specs. If you have trouble identifying which part of your setup is responsible for the DOM, we’ve got a Discord server where you might find someone to help you with this.

The issue still exists on v14 of user-event, and I don’t have this mocked method. After downgrading to v13 it looks ok.

@ph-fritsche please reopen this issue, as a problem still exists.