Jest can not deal with insertAdjacentElement?

问题

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);
}

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)

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

回答1:

I finally found the answer myself:

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.

[Edit:] 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.

来源：https://stackoverflow.com/questions/45833331/jest-can-not-deal-with-insertadjacentelement

标签

jestjs

jsdom

gulp-jest