开玩笑不能处理insertAdjacentElement吗？

Question

我想测试一个非常简单的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的错误，还是我在这里错过了一些东西？

Answer 1

我终于找到了答案：

Jest使用的jsdom尚不支持DOM函数insertAdjacentElement（请参阅GitHub上的此问题及其参考）。因此，我必须等到jsdom实现它或在JS中使用其他方法。

[编辑：]现在，您可以使用ysdom的最新版本（例如，jest-environment-jsdom-fourteen模块），方法是使用yarn或npm安装它，然后将其添加到您的jest配置中，如此处所述。