如何使用JSDom包装导入？

Question

我有一个使用ES2015模块语法的代码库，即。import foo from 'bar'。它也有如下代码：

// setup.js
var foo = window.foo || '';

我想使用jsdom为我的测试环境提供一个模拟DOM，但是我不知道如何包装我导入的代码。import语句必须在任何代码之前，所以我不能这样做：

import jsdom;

jsdom({
    html: '<div></div>',
    done: () => {
        import setup from 'setup';
    }
})

但是，如果我将导入留在顶部，在jsdom参与之前引用window：

import foo from 'bar'; // this uses the DOM
import jsdom;

jsdom({
    html: '<div></div>',
    done: () => () => { console.log('foo'); }
})

有没有办法在不更改为AMD或CommonJS的情况下解决这个问题？

Answer 1

所以事实证明我只需要看一下说明书...或者对我来说是一个精彩的博客，它为我打破了规范(感谢②ality!)在函数中不能使用import foo from 'bar'是正确的，但事实证明，这并不是在ES6中使用import的唯一方法。还有System.import ...

jsdom.env({
    html: '<div></div>',
    done: () => {
        System.import('setup')
            .then(setup) => {
                // code that uses setup, now JSDom-wrapped
    }
});

请注意，如果您这样做是为了通过Mocha这样的测试运行器运行代码，则需要通知您的测试运行器对加载进行异步等待。换句话说(对于Mocha)，您需要使用done参数，如下所示：

jsdom.env({
    html: '<div></div>',
    done: () => {
        describe('foo', () => {
            it('does something', (done) => {
                System.import('setup')
                    .then(setup) => {
                        // code that uses setup, now JSDom-wrapped
                        done(); // tell Mocha we're finished
                    });
            });
        });
    });
});