开玩笑地模拟 document.createRange

Question

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

我们为自定义 JSDom + 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

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

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

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

关于此的一个甜蜜的事情是，您可以创建自己的模块来进行常见的初始设置以进行测试，并在需要该功能的多个组件库中使用它们。

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

Answer 2

我在setupTests.js 中添加了polyfill，如thread 中所述。

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

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