CODEWITHSUNDEEP
javascriptjestjsjsdom
Kyle Kelley
Kyle Kelley

Reputation: 14144

Mocking document.createRange for jest

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?

Upvotes: 11

Views: 10434

Answers (2)

jjbskir
jjbskir

Reputation: 10617

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.

Upvotes: 9

Kyle Kelley
Kyle Kelley

Reputation: 14144

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"]
},

Upvotes: 5

Related Questions