On testing I get 'illegal invocation'

[lgdelacruz92]

Libraries * Jest * React Testing Library

Description When I run the test for the component to uses smooth-dnd by itself. It works fine. However, when I run all my tests, I this illegal invocation error.

`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:11462)
  at node_modules/smooth-dnd/dist/index.js:1:11356
  at node_modules/smooth-dnd/dist/index.js:1:96
  at Object.<anonymous> (node_modules/smooth-dnd/dist/index.js:1:195)
  at node_modules/react-smooth-dnd/dist/index.js:1:145`

It seems that smooth-dnd calls jsdom and jsdom is throwing an exception. But it only happens when I run all my tests. When I run them individually, they work fine.

Any help would be appreciated.

[lorenzk]

I have the same issue, but only when running the whole test suite on linux. Running single tests and the whole suite works fine on macOS. Did you find a solution to this problem, @lgdelacruz92 ?

[lorenzk]

Update: This can be fixed with jest setupFiles, as described here https://github.com/kutlugsahin/smooth-dnd/issues/36

[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. 🐈