我想测试一个非常简单的JS函数
export function displaySpinner() {
const loadingOverlayDOM = document.createElement('DIV');
const spinner = document.createElement('IMG');
loadingOverlayDOM.id = 'overlay-spinner';
loadingOverlayDOM.className = 'content-overlay';
spinner.className = 'is-spinning';
spinner.setAttribute('src', '/assets/img/svg/icons/spinner.svg');
l loadingOverlayDOM.insertAdjacentElement('beforeend', spinner);
document.body.insertAdjacentElement('beforeend', loadingOverlayDOM);
}
与这个(为了这个问题的目的而精简)Jest测试代码:
test('displaySpinner displays the spinner overlay in the current page', () => {
utils.displaySpinner();
});
但测试运行对我大喊大叫:
FAIL app/helper/utils.test.js
● utils › displaySpinner displays the spinner overlay in the current page
TypeError: loadingOverlayDOM.insertAdjacentElement is not a function
at Object.displaySpinner (app/helper/utils.js:185:439)
at Object.<anonymous> (app/helper/utils.test.js:87:15)
at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
at process._tickCallback (internal/process/next_tick.js:109:7)
这是 Jest 中的错误还是我在这里遗漏了一些东西?
我终于自己找到了答案:
玩笑用途jsdom尚不支持 DOM 功能插入相邻元素 (see GitHub 上的这个问题及其参考文献 https://github.com/tmpvar/jsdom/issues/1890)。所以我必须等到 jsdom 实现它或者在我的 JS 中使用其他方法。
您可以将 jsdom 的默认版本替换为最新版本(例如14 https://github.com/ianschmitz/jest-environment-jsdom-fourteen)通过安装相应的模块:
npm install --save-dev jest-environment-jsdom-fourteen
或使用纱线:
yarn add jest-environment-jsdom-fourteen --dev
然后用笑话testEnvironment
配置参数:
{
"testEnvironment": "jest-environment-jsdom-fourteen"
}
请注意,如果您使用以下命令启动 jest--env=jsdom
参数,这将覆盖配置文件,因此您需要删除它。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)