How Can I Use JSDom With ES6 Module Syntax?

This Stack Overflow describes the problem in details:

http://stackoverflow.com/questions/38651209/how-can-i-wrap-an-import-with-jsdom

But basically my question is this: jsdom has to “wrap” code to get used, but it’s impossible to “wrap” an ES6 module import (ie. import foo form 'bar') because they have to come before any code. And if DOM-using code is part of the import itself, it needs to be wrapped by JSDom

Is there a way around this?

[rinogo]

Thanks for this, @machineghost ! Question for you and any others - In a new Node.js project (NestJS, to be specific), I need something like jsdom. In 2021, it feels pretty “hacky” to have to do this. Is there a better library to use, or is jsdom still well-liked?

I was going to use jsdom, but after seeing this code, I’m inclined to give LinkeDOM a shot.

[machineghost]

First off, thanks for the wiki link; it was a piece in the puzzle which ultimately led me to the solution (at this awesome blog: http://www.2ality.com/2014/09/es6-modules-final.html). As it explains, there is a way to do imports in a way that they can be wrapped by JSDom: System.import.

Here’s the solution to the problem for other ES6/JSDom-lovers:

import jsdom;

jsdom({
    html: '<div></div>',
    done: () => {
        // don't do this:
        //      import setup from 'setup';

        // do this:
        System.import('setup')
            .then((setup) => {
                    // test code that uses setup
            })
    }
});

NOTE: If you’re using a test framework like Mocha, you’ll need to use it’s asynchronous test functionality to make this work (ie. you need a done argument in your it function, and then you’ll need to invoke done after the test finishes).

Anyhow, I hope that helps anyone else going down this road, and thanks again for the help in solving it.