Mocking document.createRange for jest

Question

Jest，通過JSDom我想，沒有document.createRange定義。我如何覆蓋或提供這種行爲？

我們爲我們的定製JSDom +摩卡設置寫的版本（所有測試跑前）看起來是這樣的：

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