Enzyme: Having trouble with a huge warning message regarding createRange

[mnemanja]

I'm using Enzyme with Jest in Create-react-app application.

Current behavior

I have a test which uses the mount method to find an element on a page. The test passes but a warning gets printed out:

(node:79591) UnhandledPromiseRejectionWarning: TypeError: document.createRange is not a function
(node:79591) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:79591) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:79591) UnhandledPromiseRejectionWarning: TypeError: document.createRange is not a function
(node:79591) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:79591) UnhandledPromiseRejectionWarning: TypeError: document.createRange is not a function
(node:79591) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:79591) UnhandledPromiseRejectionWarning: TypeError: document.createRange is not a function
(node:79591) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)

I have tried adding some polyfill for the createRange. The error message is different, but still remains:

(node:79782) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'nodeName' of undefined
(node:79782) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:79782) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:79782) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'nodeName' of undefined
(node:79782) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:79782) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'nodeName' of undefined
(node:79782) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:79782) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'nodeName' of undefined
(node:79782) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)

The test in question:

import React from "react";
import { shallow, mount } from "enzyme";
import UnitGroup from './UnitGroup';
import { UnitGroupHeading } from '../UnitGroupHeading/UnitGroupHeading';

it('should render properly', () => {
  shallow(<UnitGroup />);
});

it('should render UnitGroupHeading properly', () => {
  const wrapper = mount(<UnitGroup unit={{name: 'test'}} />);
  expect(wrapper.find(UnitGroupHeading)).toHaveLength(1);
});

Expected behavior

The error message should not be shown.

Your environment

• Mac OS High Siera
• Node 8.10.0
• npm 5.7.1

API

• [ ] shallow
• [x] mount
• [ ] render

Version

| library | version
| ---------------- | -------
| Enzyme |3.3.0
| React |16.3.0
| react-script |2.0.0-next.b2fd8db8

Adapter

• [x] enzyme-adapter-react-16
• [ ] enzyme-adapter-react-15
• [ ] enzyme-adapter-react-15.4
• [ ] enzyme-adapter-react-14
• [ ] enzyme-adapter-react-13
• [ ] enzyme-adapter-react-helper
• [x] react-test-renderer 16.3.0

[nsaubi]

Exactly the same thing happens to me :

Current behavior
I have a test which uses the mount method to find an element on a page. The test passes but a warning gets printed out:
(node:26611) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: document.createRange is not a function

I polyfill this createRange function and then get the other error as mnemanja :
(node:27011) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'nodeName' of undefined

Expected behavior
The error message should not be shown.

Your environment
Linux Ubuntu 17.04
Node 8.4.0
yarn 1.6.0
npm 5.3.0

API

• [ ] shallow
• [x] mount
• [ ] render

library | version
-- | --
Enzyme | 3.3.0
React | 16.2.0

Adapter

• [x] enzyme-adapter-react-16
• [ ] enzyme-adapter-react-15
• [ ] enzyme-adapter-react-15.4
• [ ] enzyme-adapter-react-14
• [ ] enzyme-adapter-react-13
• [ ] enzyme-adapter-react-helper
• [ ] react-test-renderer 16.3.2

[alienintheheights]

Same issue, same error message:

Windows 10
node v8.9.1
yarn 1.6.1
enzyme 3.3.0
jest 22.4.3

[stonecoder19]

anybody solved this issue?

[stonecoder19]

Im having a problem with jest and tooltips from material ui

[igorsechyn]

@stonecoder19 i had the same problem with createRange and material ui. I had to add another snippet to the test setup file for jest:

if (global.document) {
    document.createRange = () => ({
        setStart: () => {},
        setEnd: () => {},
        commonAncestorContainer: {
            nodeName: 'BODY',
            ownerDocument: document,
        },
    });
}

I did not have the error TypeError: Cannot read property 'nodeName' of undefined, so not sure whats going on there

[ljharb]

It seems like there's some code in your components (possibly third-party code) that's throwing an error inside a promise. This doesn't seem enzyme-related.

Happy to reopen if I'm wrong!