jsdom - 如何使用 JSDom 包装导入？

Question

我有一个使用 ES2015 模块语法的代码库，即。 从“bar”导入 foo。它也有这样的代码:

// 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 是真的来自函数内部的 '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
                    });
            });
        });
    });
});