TypeError: range.cloneRange is not a function after updating to v.14 #902

jacoob1406 · 2022-04-04T12:05:51Z

Reproduction example

https://pastecode.io/s/n6p0zq9q

Prerequisites

Update to user-event v.14
Add async/await for tests with user-event usage.
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

The text was updated successfully, but these errors were encountered:

ph-fritsche · 2022-04-04T12:25:07Z

Please create a reproducible example of the bug. If your reproduction contains a component, you'll need to include that.

This is probably an issue with the environment not implementing Range.cloneRange().

MarijNefkens · 2022-04-08T13:55:52Z

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.

osamajandali · 2022-04-11T15:12:29Z

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

jacoob1406 · 2022-04-13T09:25:39Z

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.

This was exactly what caused the issue in my case - thanks @MarijNefkens!

knoefel · 2022-05-09T19:49:39Z

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

bonham · 2022-05-13T22:28:58Z

Same issue: I am getting target.ownerDocument.createRange is not a function from statement user.click(..)
This is my test:

import { render, screen } from '@testing-library/vue'
import userEvent from '@testing-library/user-event'
import EditableText from '@/components/EditableText.vue'

describe('EditableText', () => {
  test('Simple', async () => {
    const user = userEvent.setup()
    const mockUpdateFunc = jest.fn()
    render(
      EditableText, {
        props: {
          updateFunction: mockUpdateFunc,
          initialtext: 'hello text'
        }
      })
    const editableField = await screen.findByText('hello text')
    await user.click(editableField)
    await user.keyboard('newvalue{Enter}')
    expect(mockUpdateFunc.mock.calls.length).toBe(1)
    expect(mockUpdateFunc.mock.calls[0][0]).toEqual('newvalue')
  })
})

ph-fritsche · 2022-05-15T07:00:48Z

Please try upgrading your DOM implementation and check for mocked methods on it as #902 (comment) suggests.

frankandrobot · 2022-05-20T20:48:07Z

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: capricorn86/happy-dom#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",

Zemelia · 2022-06-02T14:37:14Z

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.

ph-fritsche · 2022-06-02T15:21:11Z

@Zemelia This is not an issue with user-event but with your environment not implementing Range.cloneRange().

Zemelia · 2022-06-03T13:26:13Z

@Zemelia This is not an issue with user-event but with your environment not implementing Range.cloneRange().

@ph-fritsche Do such requirements exist somewhere in docs?

ph-fritsche · 2022-06-03T14:16:42Z

@Zemelia

user-event is a companion
library for Testing Library that simulates user interactions by dispatching the
events that would happen if the interaction took place in a browser.

While most examples with user-event are for React, the library can be used
with any framework as long as there is a DOM.

I'd argue that it's fair to assume a DOM according to specs that roughly matches what is implemented in modern browsers to be implied.

Zemelia · 2022-06-03T14:44:56Z

@ph-fritsche Thank You!
I guess that I got your point.
In the case of React testing, v14 of user-event is for react-dom 18+ as it requires methods that were missed in previous react-dom versions, like v17, or we need to simulate them.

ph-fritsche · 2022-06-03T16:05:27Z

@Zemelia user-event interacts with the DOM. Whether you create the DOM elements with react@17, react@18, angular@14 or mySuperAwesomeOwnJSFramework, doesn't matter.

Zemelia · 2022-06-03T16:09:12Z

@ph-fritsche But user-event@14 with react-dom@17 have issues mentioned above, like
target.ownerDocument.createRange is not a function

user-event@13 works well with that react and react-dom version

ph-fritsche · 2022-06-03T16:37:53Z

@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.

frankandrobot · 2022-06-03T17:08:06Z

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: @Zemelia<https://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 server<https://discord.gg/testing-library> where you might find someone to help you with this. — Reply to this email directly, view it on GitHub<#902 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAGAGMKINB4OTIK7AEYZG3LVNIYGZANCNFSM5SPJWDPQ>. You are receiving this because you commented.Message ID: ***@***.***>

Zemelia · 2022-06-06T06:45:46Z

@ph-fritsche Understand, many thanks for the explanation!
@frankandrobot Thanks, will check :)

- removed the mocked document.createRange. This isn't necessary anymore. See testing-library/user-event#902 - awaited userEvent calls, removed unnecessary act blocks - fixed type errors around icon types - note: there are still act warnings for some tests in the specs, even some not involving any state updates (style snapshots). Probably points to unwanted rerenders. Added a fixme comment.

* Upgrade user-event to v14 * Address breaking changes in Popover spec - removed the mocked document.createRange. This isn't necessary anymore. See testing-library/user-event#902 - awaited userEvent calls, removed unnecessary act blocks - fixed type errors around icon types - note: there are still act warnings for some tests in the specs, even some not involving any state updates (style snapshots). Probably points to unwanted rerenders. Added a fixme comment. * Address breaking changes in useEscapeKey - exposed the renderHook method from @testing-library/react, meant to replace the onoe from @testing-library/react-hooks, which isn't compatible with React 18. For migration purposes, I'm naming it newRenderHook--I'll remove the legacy method and rename the new one after all specs have been migrated - awaited userEvent calls and removed unnecessary act blocks * Fix accessibility error in ToastContext The live region wrapping toasts should not be a ul, because uls son't allow the status role (likely because it overrides list semantics anyways. Switched for divs. Found through a better axe test * Migrate user-event in NotificationToast spec - await userEvent method calls - added a new render helper to render a component tree including the ToastProvider, to reduce test boilerplate when testing business logic - improved the accesibility test to cover an actual document with a toast instead of the toast UI in isolation * WIP: upgrade user-event in SidePanel components - awaited userEvent methods and removed unnecessary act blocks - migrated useSidePanel to newRenderHook and removed unnecessary actHook blocks - added ariaHideApp=false to default test props in SidePanelContext to silence react-modal warning about the undefined app element - set up userEvent with delay=null in SidePanelContext to address this issue: testing-library/user-event#833 - TODO: two tests using userEvent.keyboard() are still failing. Marked as todo. - TODO: there are two act() warnings left (likely from before) when running `yarn test sidepanel` (all SidePanel-related specs) * Patch keyCode event in SidePanel spec This also adds comments on accessibility tests that inconsistently trigger axe warnings. Will be investigated and addressed separately. * Migrate Button, RadioButton, RadioButtonGroup, Header Awaited userEvent calls. * Migrate remaining input components Checkbox, CurrencyInput, Selector. Awaited userEvent method calls * Migrate notification components Awaited userEvent method calls * Migrate modal components - awaited userEvent method calls - set up userEvent with delay=null in ModalContext spec (same as in SidePanelContext) * Migrate more components Hamburger, Pagination, PageList, UtilityLinks, useClickOutside. Awaited userEvent method calls. Does not include the migration to new renderHook for useClickOutside, will be handled separately. * Use userEvent with delay=null in ToastProvider spec Same as in the ModalProvider and SidePanelProvider * Migrate userEvent in useAutoExpand - awaited method calls - migrated {space} to { } - TODO: migrate to the new renderHook, will be addressed separately * Migrate userEvent in remaining components - await method calls - fix some TS errors * Migrate useStep to renderHook from RTL - replace imports - replace removed waitForNextUpdate by a more explicit waitFor - remove tests covering error logic. Error testing was removed in the renderHook port to RTL and we're not covering this in other components, so I think it's fine to remove. See testing-library/react-testing-library#991 for more context * Migrate renderHook from RHTL to new RTL implementation See testing-library/react-testing-library#991 for context. - replaced import of renderHook to newRenderHook (will be renamed in a follow-up commit) - replaced actHook by act - (edge cases were handled in earlier commits) * Rename newRenderHook to renderHook * Await remaining userEvent promises Not sure why these specs passed locally before * Address review comment

jacoob1406 added bug Something isn't working needs assessment This needs to be looked at by a team member labels Apr 4, 2022

ph-fritsche removed bug Something isn't working needs assessment This needs to be looked at by a team member labels Apr 4, 2022

ph-fritsche added the environment Issue with the environment label May 15, 2022

ph-fritsche closed this as completed May 15, 2022

ph-fritsche mentioned this issue Jul 19, 2022

_userEvent.default.setup is not a function #839

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: range.cloneRange is not a function after updating to v.14 #902

TypeError: range.cloneRange is not a function after updating to v.14 #902

jacoob1406 commented Apr 4, 2022 •

edited

ph-fritsche commented Apr 4, 2022

MarijNefkens commented Apr 8, 2022

osamajandali commented Apr 11, 2022

jacoob1406 commented Apr 13, 2022

knoefel commented May 9, 2022

bonham commented May 13, 2022 •

edited

ph-fritsche commented May 15, 2022

frankandrobot commented May 20, 2022

Zemelia commented Jun 2, 2022 •

edited

ph-fritsche commented Jun 2, 2022

Zemelia commented Jun 3, 2022 •

edited

ph-fritsche commented Jun 3, 2022

Zemelia commented Jun 3, 2022

ph-fritsche commented Jun 3, 2022

Zemelia commented Jun 3, 2022

ph-fritsche commented Jun 3, 2022

frankandrobot commented Jun 3, 2022 via email

Zemelia commented Jun 6, 2022

TypeError: range.cloneRange is not a function after updating to v.14 #902

TypeError: range.cloneRange is not a function after updating to v.14 #902

Comments

jacoob1406 commented Apr 4, 2022 • edited

Reproduction example

Prerequisites

Expected behavior

Actual behavior

User-event version

Environment

Additional context

ph-fritsche commented Apr 4, 2022

MarijNefkens commented Apr 8, 2022

osamajandali commented Apr 11, 2022

jacoob1406 commented Apr 13, 2022

knoefel commented May 9, 2022

bonham commented May 13, 2022 • edited

ph-fritsche commented May 15, 2022

frankandrobot commented May 20, 2022

Zemelia commented Jun 2, 2022 • edited

ph-fritsche commented Jun 2, 2022

Zemelia commented Jun 3, 2022 • edited

ph-fritsche commented Jun 3, 2022

Zemelia commented Jun 3, 2022

ph-fritsche commented Jun 3, 2022

Zemelia commented Jun 3, 2022

ph-fritsche commented Jun 3, 2022

frankandrobot commented Jun 3, 2022 via email

Zemelia commented Jun 6, 2022

jacoob1406 commented Apr 4, 2022 •

edited

bonham commented May 13, 2022 •

edited

Zemelia commented Jun 2, 2022 •

edited

Zemelia commented Jun 3, 2022 •

edited