开玩笑不能处理insertAdjacentElement吗? [英] Jest can not deal with insertAdjacentElement?

问题描述

我想测试一个非常简单的JS函数

I want to test a quite simple JS function

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测试代码:

with this (for the purpose of this issue stripped down) Jest test code:

test('displaySpinner displays the spinner overlay in the current page', () => {
    utils.displaySpinner();
});

但是测试运行对我大喊:

But the test run yells at me:

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的错误，还是我在这里遗漏了一些东西?

Is this an error in Jest or am I missing something here?

推荐答案

我终于找到了答案:

Jest使用的 jsdom 尚不支持DOM功能 insertAdjacentElement (请参阅

Jest uses jsdom which does not yet support the DOM function insertAdjacentElement (see this issue on GitHub and it's references). So I'll have to wait until jsdom implements it or use another method in my JS.

现在，您可以通过使用yarn或npm安装jsdom(例如jest-environment-jsdom-fourteen模块)来使用最新版本的jsdom，然后将其添加到您的jest配置中

Now you can use up-to-date versions of jsdom (e.g. the jest-environment-jsdom-fourteen module) by installing it using yarn or npm and then simply adding it to your jest configuration like described here.

这篇关于开玩笑不能处理insertAdjacentElement吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！