web-dev-qa-db-ja.com

mocha / chaiでウィンドウ/ドキュメントをモックする方法

getElement関数を単体テストしようとすると

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

mochaはdocumentについて何も知らないので、次のようなことができると思いました。

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

これは機能しますが、これが正しいアプローチであるかどうか疑問に思っており、おそらくこの問題を解決するために利用可能なパッケージがあるのでしょうか？

javascriptnode.jsunit-testingmocha
20
Jeanluca Scaljeri

利用可能なオプションがいくつかあります。

オプション1：使用 [〜＃〜] jsdom [〜＃〜]

コードにDOMを追加することにより、node.js内のクライアント側コードの多くを単体テストできます

オプション2：クライアントでMOCHAを使用する

Mochaはクライアント内で実行されるため、個別のクライアント側の単体テストを使用できます。これは、特定のJS埋め込みではなく、特定のブラウザーに対してテストできるため、私の好みのアプローチになる傾向があります。

オプション3：使用 PhantomJS

PhantomJSを使用すると、テスト環境内でヘッドレスブラウザーを制御できます。

オプション4： ヘッドレスChrome

Headless Chromeがリリースされたので、PhantomJSのメンテナーは退職しました。

16
Jeremy J Starcher

私はちょうどあなたがウィンドウ上の特定の機能をモックする必要があるときにあなたが提案したものと同様のテストを書いてきました：

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;上記） グローバルをいじる の後。

15
Simon Bengtsson