Как обмануть окно/документ с моккой/чаем

Когда я пытаюсь выполнить unit test функцию getElement

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

mocha ничего не знает о document, поэтому я решил, что вы можете сделать что-то вроде этого:

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

Хотя это работает, мне интересно, правильно ли это подход, и, возможно, есть пакет для решения этой проблемы, потому что мой подход может стать трудоемким, если используется больше API браузера?

Ответ 1

Я писал тесты, похожие на те, что вы предлагали, когда мне просто нужно было смоделировать определенную функцию в окне:

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; выше) после работы с глобальными переменными.

Ответ 2

Доступно несколько вариантов:

Вариант 1: используйте JSDOM

Добавив DOM к вашему коду, вы можете unit test большую часть вашего клиентского кода в node.js

Вариант 2. Использование MOCHA на клиенте

Mocha запускается внутри клиента, и вы можете использовать отдельные тестовые тесты на стороне клиента. Это, как правило, мой предпочтительный подход, поскольку я могу протестировать против конкретных браузеров, а не для конкретной имплантации JS.

Вариант 3: используйте PhantomJS

~~PhantomJS позволяет вам управлять безгласным браузером в тестовой среде.~~

Вариант 4: Безголовый Chrome

Теперь, когда Headless Chrome отключен, сторонник PhantomJS вышел на пенсию.