如何用摩卡/柴制作模拟窗口/文档

How to mock window/document with mocha/chai

本文关键字：模拟 窗口 文档 何用 摩卡      更新时间：2024-04-01

当我尝试对getElement功能进行单元测试时

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

摩卡对document一无所知，所以我想你可能会做这样的事情：

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

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

有几个选项可供选择：

选项1：使用JSDOM

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

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

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

选项3：使用PhantomJS

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

选项4：无头镀铬

现在Headless Chrome已经发布，PhantomJS的维护人员已经退休了。

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

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

当我想要一个更完整的窗口对象时，我一直在其他测试中使用模拟浏览器：

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;）。

相关文章：