开玩笑地嘲笑 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）。

一个 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 一起工作，我必须在 commonAncestorContainer.

上方添加 // @ts-ignore

开玩笑地嘲笑 document.createRange

Mocking document.createRange for jest

javascript

jsdom

jestjs