web-dev-qa-db-fra.com

Comment se moquer d'une fenêtre / d'un document avec mocha / chai

Lorsque j'essaie de tester uniquement la fonction getElement

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

mocha ne sait rien de document, donc j'ai pensé que vous pourriez faire quelque chose comme ça:

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

Bien que cela fonctionne, je me demande si c'est la bonne approche et peut-être existe-t-il un package disponible pour résoudre ce problème, car mon approche peut devenir laborieuse si davantage d'API de navigateur sont utilisées?

javascriptnode.jsunit-testingmocha
20
Jeanluca Scaljeri

Plusieurs options s'offrent à vous:

Option 1: utilisez JSDOM

En ajoutant un DOM à votre code, vous pouvez tester en bloc une grande partie de votre code côté client dans node.js

Option 2: utiliser MOCHA sur le client

Mocha s'exécute à l'intérieur du client et vous pouvez utiliser des tests unitaires côté client séparés. Cela a tendance à être mon approche préférée car je peux tester contre des navigateurs spécifiques et non une implantation JS spécifique.

Option 3: utilisez PhantomJS

PhantomJS vous permet de contrôler un navigateur sans tête dans votre environnement de test.

Option 4: Chrome sans tête

Maintenant que Headless Chrome est sorti, le mainteneur de PhantomJS a pris sa retraite.

16
Jeremy J Starcher

J'ai écrit des tests similaires à ce que vous proposiez lorsque je devais juste me moquer d'une certaine fonction sur la fenêtre:

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

J'utilise mock-browser dans d'autres tests quand je voulais un objet fenêtre plus complet:

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

Notez que vous souhaitez probablement restaurer l'objet fenêtre (global.window = windowRef; ci-dessus) après jouer avec les globaux .

15
Simon Bengtsson