Как издеваются окно/документ с мокко/Chai

Question

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

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

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

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

Answer 1

Есть несколько вариантов, доступных для Вас:

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

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

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

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

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

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

Вариант 4: Headless Chrome

Теперь, когда Безголовый Chrome отсутствует, PhantomJS сопровождающий в отставку.

Answer 2

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

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

я использую mock-browser в других тестах, когда я хотел более полного объекта окна:

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

Обратите внимание, что вы, вероятно, хотите, чтобы восстановить объект окна (global.window = window; выше) после messing with globals.