Jest 不能处理 insertAdjacentElement？答案

【问题标题】：Jest can not deal with insertAdjacentElement?Jest 不能处理 insertAdjacentElement？
【发布时间】：2018-01-31 15:59:56
【问题描述】：

我想测试一个很简单的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 中的错误还是我在这里遗漏了什么？

【问题讨论】：

标签： jestjs jsdom gulp-jest

【解决方案1】：

我终于自己找到了答案：

Jest 使用 jsdom，它还不支持 DOM 函数 insertAdjacentElement（请参阅 this issue on GitHub and it's references）。所以我必须等到 jsdom 实现它或者在我的 JS 中使用另一种方法。

您可以通过安装相应的模块将 jsdom 的默认版本替换为最新版本（例如14）：

npm install --save-dev jest-environment-jsdom-fourteen

或使用纱线：

yarn add jest-environment-jsdom-fourteen --dev

然后使用开玩笑的testEnvironment 配置参数：

{
  "testEnvironment": "jest-environment-jsdom-fourteen"
}

请注意，如果您使用 --env=jsdom 参数启动 jest，这将覆盖配置文件，因此您需要将其删除。

【讨论】：