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

Когда я пытаюсь выполнить 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 вышел на пенсию.