Mocking document.createRange for jest

Question

Jest, through JSDom I imagine, does not have document.createRange defined. How can I overwrite or provide this behavior?

The version we wrote for our custom JSDom + mocha setup (ran before all tests) looks like this:

global.Range = function Range() {};

const createContextualFragment = (html) => {
  const div = document.createElement('div');
  div.innerHTML = html;
  return div.children[0]; // so hokey it's not even funny
};

Range.prototype.createContextualFragment = (html) => createContextualFragment(html);

// HACK: Polyfil that allows codemirror to render in a JSDOM env.
global.window.document.createRange = function createRange() {
  return {
    setEnd: () => {},
    setStart: () => {},
    getBoundingClientRect: () => {
      return { right: 0 };
    },
    getClientRects: () => [],
    createContextualFragment,
  };
};

Is there a way to provide this to jest?

Answer 1

I added the polyfill in setupTests.js as described in this thread.

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

For it to work with TypeScript I had to add // @ts-ignore above commonAncestorContainer.

Answer 2

Create a script that sets up the polyfill you want -- let's call it "mockument.js" for this example. Within the jest configuration of your package.json set setupFiles to point to this script:

"jest": {
  "setupFiles": ["raf/polyfill", "./scripts/mockument"]
}

As shown above, you can also use module names (e.g. raf/polyfill).

One sweet thing about this is that you can create your own module for common initial setups for testing and use them across several component libraries that need the functionality.

"jest": {
  "setupFiles": ["@nteract/mockument"]
},