TypeError: Illegal invocation when running app tests with jest

[freezer278]

● Test suite failed to run

    TypeError: Illegal invocation

      at Node.get [as childNodes] (node_modules/jsdom/lib/jsdom/living/generated/Node.js:423:13)
      at Node.get (node_modules/smooth-dnd/dist/index.js:1:15997)
      at node_modules/smooth-dnd/dist/index.js:1:15891
      at Object.<anonymous> (node_modules/smooth-dnd/dist/index.js:1:16064)
      at Object.<anonymous> (node_modules/smooth-dnd/dist/index.js:1:16414)
      at n (node_modules/smooth-dnd/dist/index.js:1:358)
      at Object.<anonymous> (node_modules/smooth-dnd/dist/index.js:1:16522)
      at Object.<anonymous> (node_modules/smooth-dnd/dist/index.js:1:23545)
      at n (node_modules/smooth-dnd/dist/index.js:1:358)
      at Object.<anonymous> (node_modules/smooth-dnd/dist/index.js:1:23661)

[alexandreDavid]

When you include directly the lib in your project, you have this error:
● Test suite failed to run

TypeError: Illegal invocation

  28 |       get: function() {
  29 |         var node,
> 30 |           nodes = this.childNodes,
  31 |           i = 0;
  32 |         while ((node = nodes[i++])) {
  33 |           if (node.nodeType === 1) {
  
  at Node.get [as childNodes] (node_modules/jsdom/lib/jsdom/living/generated/Node.js:332:13)
  at Node.get (src/tu/smooth-dnd/src/polyfills.js:30:72)
  at src/tu/smooth-dnd/src/polyfills.js:25:25
  at Object.<anonymous> (src/tu/smooth-dnd/src/polyfills.js:41:3)
  at Object.<anonymous> (src/tu/smooth-dnd/src/mediator.js:1:47063)

[alexandreDavid]

I added this to the setup.js and it works:

Object.defineProperty(global, 'Node', {
  value: {firstElementChild: 'firstElementChild'}
})

[freezer278]

@alexandreDavid, thank you, it solved my problem!

[hlarcher]

@alexandreDavid what setup.js?

[alexandreDavid]

@hlarcher In your project, you have a file for your jest configuration. Most of the time, it's jest.config.js. One of the properties in the exported object is setupFiles. It loads some files you want before your tests. If you don't have any setup file, create one and add it to the setupFiles array property. Just add the code above.

[AdelineCaro]

Hello,

Thanks for this fix, but are you sure there aren't none side effect changing this value for all tests ?
I'm really afraid of creating other bugs doing that.

(I try to add this fix directly in my beforeEach() or beforeAll() functions, but he warning still occur randomly.)

Thanks :)
Adeline

[alfupe]

I had a similar error

TypeError: Illegal invocation

      at removeEventListener (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:15)

And I solved it changing the jest environment (node instead of jsdom) for that specific test at the top of it as the docs says https://jestjs.io/docs/en/configuration#testenvironment-string

/**
 * @jest-environment node
 */

I don't know if this is could be applicable to this case.

[leotabosa]

Mocking the library is a solution if that's ok to you.

https://jestjs.io/docs/manual-mocks#mocking-node-modules

//  smooth-dnd.js or vue-smooth-dnd.js inside __mocks__ folder

module.exports = {
  // some mock implementation
}

Solves the problem and as a plus we don't mess with the environment.

[amendx]

@leotabosa that was exactly what I was looking for! thank you 🚀

[amendx]

For those (like me) that #36 didn't work, and also #52, I had to spend a few hours on it just to figure it out.

Inside the smooth-dnd lib, there's a polyfill.ts that does, baiscally:

// Overwrites native 'firstElementChild' prototype.
// Adds Document & DocumentFragment support for IE9 & Safari.
// Returns array instead of HTMLCollection.
(function(constructor) {
    if (constructor &&
        constructor.prototype &&
        constructor.prototype.firstElementChild == null) {
        Object.defineProperty(constructor.prototype, 'firstElementChild', {
            get: function() {
                var node, nodes = this.childNodes, i = 0;
                while (node = nodes[i++]) {
                    if (node.nodeType === 1) {
                        return node;
                    }
                }
                return null;
            }
        });
    }
})(Node || Element);

And that polyfill just aplly up to IE9 and Safari 8, also Chrome versions up to 29. Since we're on v.289 of chrome and others, that's not even usefull. In my (updated) package, I just removed this function and every Jest test works fine.

I took the time to wrap everything up to my own way, removing the smooth-dnd dependency and making everything to .js.

If you're still struggling with that issue, come take a look at my solution at vue-dndrop.

If that, somehow helps you, let me know. 🐈