如何使用mocha / chai模拟窗口/文档

Question

当我尝试单元测试getElement函数时

class BarFoo {
    getElement() {
        return document.querySelector('#barfoo');
    }
}

mocha对document一无所知，所以我想你可能会这样做：

beforeEach(() => {
    global.document = {
        querySelector: () => { ... }
    }
}

虽然这有效，但我想知道这是否是正确的方法，并且可能有一个包可以解决这个问题，因为如果使用更多的浏览器API，我的方法会变得费力？

Answer 1

有几种选择：

选项1：使用JSDOM

通过在代码中添加DOM，您可以在node.js中对大部分客户端代码进行单元测试

选项2：在客户端上使用MOCHA

Mocha确实在客户端内部运行，您可以使用单独的客户端单元测试。 这往往是我的首选方法，因为我可以针对特定的浏览器进行测试，而不是特定的JS植入。

选项3：使用 PhantomJS

PhantomJS允许您在测试环境中控制无头浏览器。

选项4： 无头Chrome

现在无头Chrome已经推出，PhantomJS维护人员已经退休了。

Answer 2

当我只需要在窗口上模拟某个函数时，我一直在编写类似于你提出的测试：

it('html test', function () {
    const windowRef = global.window;
    global.window = {document: {querySelector: () => null}};
    const lib = require('lib-that-uses-queryselector');
    assert(true);
    global.window = windowRef;
});

当我想要一个更完整的窗口对象时，我一直在其他测试中使用mock-browser ：

it('html test', function () {
     const windowRef = global.window;
     const MockBrowser = require('mock-browser').mocks.MockBrowser;
     global.window = new MockBrowser().getWindow();
     const lib = require('lib-that-uses-window');
     assert(true);
     global.window = windowRef;
});

请注意，您可能希望在弄乱全局变量后恢复窗口对象（ global.window = windowRef;上面）。