嘲笑document.createRange开玩笑

Question

通过我想象的JSSm，Jest还没有document.createRange定义。如何覆盖或提供这种行为？

我们为自定义JSm + mocha设置编写的版本（在所有测试之前运行）如下所示：

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,
  };
};

有办法提供这种玩笑吗？

Answer 1

我setupTests.js按照这个线程中的描述添加了 polyfill 。

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

为了让它与 TypeScript 一起工作，我必须在// @ts-ignore上面添加commonAncestorContainer.

Answer 2

创建一个脚本来设置你想要的 polyfill——在这个例子中我们称之为“mockument.js”。在您的笑话配置package.json设置setupFiles为指向此脚本：

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

如上所示，您还可以使用模块名称（例如raf/polyfill）。

一个甜美的关于这个事情是，你可以创建自己的共同初始设置模块，用于测试和跨需要的功能的几个组件库中使用它们。

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