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配置中，指向此脚本：

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

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

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

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

Answer 2

我已按照thread所述在setupTests.js中添加了polyfill。

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

要使其与TypeScript一起使用，我必须在// @ts-ignore上方添加commonAncestorContainer。

模拟document.createRange为开玩笑

2 个答案: