Tooltip issue using Jest: TypeError document.createRange is not a function

Hi, I’m using Jest and Enzyme to test my component.

import React, { Component, Fragment } from "react";
import equal from "fast-deep-equal";
import { TextField, Tooltip, Zoom, withStyles } from "@material-ui/core";
import { checkValue, setValue } from "./PickersFunction";
import { customVariant } from "../../MuiTheme";
import {
  valueVerificationPropType,
  cellValPropType,
  classesPropType,
  typePropType
} from "../../../proptypes";

export class TextFieldWrapper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tooltipOpen: false,
      message: "",
      error: false
    };
  }

  componentDidMount() {
    const { valueVerification } = this.props;
    if (valueVerification) {
      const newState = checkValue({
        ...this.props,
        mounting: true
      });
      if (!equal(this.state, newState)) {
        this.setState(newState);
      }
    }
  }

  onValueChange = e => {
    const { value } = e.target;
    const newState = setValue({
      ...this.props,
      value
    });
    if (!equal(this.state, newState)) {
      this.setState(newState);
    }
  };

  toggleCloseTooltip = open => {
    const { error } = this.state;
    if (error) {
      this.setState({ tooltipOpen: open });
    }
  };

  render() {
    const { type, cellVal, classes } = this.props;
    const { tooltipOpen, message, error } = this.state;

    return (
      <Tooltip
        open={tooltipOpen}
        classes={{
          tooltip: classes.errorTooltip
        }}
        title={message}
        TransitionComponent={Zoom}
        interactive
      >
        <Fragment>
          <TextField
            value={cellVal}
            error={error}
            onFocus={() => this.toggleCloseTooltip(true)}
            onBlur={() => this.setState({ tooltipOpen: false })}
            onChange={this.onValueChange}
            type={type}
            fullWidth
          />
        </Fragment>
      </Tooltip>
    );
  }
}

TextFieldWrapper.propTypes = {
  cellVal: cellValPropType.isRequired,
  classes: classesPropType.isRequired,
  type: typePropType.isRequired,
  valueVerification: valueVerificationPropType
};

export default withStyles(customVariant)(TextFieldWrapper);

My test :

it("should render a Tootltip and Textfield", () => {
    const wrapper = mount(
      <TextFieldWrapperPureComponent
        cellVal={10}
        type="number"
        columnId="age"
        rowId={rowId}
        valueVerification={valueVerification}
        setRowEdited={setRowEdited}
        classes={{ customVariant }}
      />
    );
    wrapper.instance().onValueChange({ target: { value: 105 } });
  });

Result: ``` TypeError: document.createRange is not a function

  41 |     });
  42 |     if (!equal(this.state, newState)) {
> 43 |       this.setState(newState);
     |            ^
  44 |     }
  45 |   };
  46 | 

… console.error node_modules/react-dom/cjs/react-dom.development.js:17117 The above error occurred in the <Portal> component: in Portal (created by Popper) in Popper (created by Tooltip) in Tooltip (created by WithStyles(Tooltip)) in WithStyles(Tooltip) (created by TextFieldWrapper) in TextFieldWrapper (created by WrapperComponent) in WrapperComponent

Any ideas ?

[oliviertassinari]

@MorganDbs See https://github.com/jsdom/jsdom/issues/317. We use the following patch for our tests:

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

Does it fix your problem?

Update, no longer required since Jest v26.0.0 and https://github.com/facebook/jest/pull/9606.

[oliviertassinari]

The issue should have been solved in jsdom@16.0.0 now.