如何使用 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';
    }
})

但是如果我将导入留在顶部，它所属的位置，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！）你不能 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 这样的测试运行ner 对运行代码执行所有这些操作，则需要通知您的测试运行ner 执行异步等待负载。换句话说（对于 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 包装导入？

How Can I Wrap an Import With JSDom?

jsdom