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

但是，如果我将导入保留在顶部（它所属的位置），window会在jsdom参与之前被引用：

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

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

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

Answer 1

所以事实证明我只需要阅读规范...或者在我看来是一个精彩的博客，它打破了我的规范（感谢②ality！）你可以＃＆＃ 39; t 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
                    });
            });
        });
    });
});

如何用JSDom包装导入？

1 个答案: