web-dev-qa-db-ja.com

エラー:グローバルドキュメントが読み込まれずに `mount()`を呼び出したようです

酵素でテストするためのコンポーネントをマウントしようとしていますが、このエラーが発生します。

10
cameronroe

Mochaはブラウザ環境でテストを実行しないため、DOMはありません。この問題を修正するには、jsdomnpmモジュールを使用してDOMを作成する必要があります。

から 酵素ドキュメント

酵素のマウントAPIにはDOMが必要であるため、まだブラウザ環境(つまり、Node環境)にいない場合は、マウントを使用するためにJSDOMが必要です。

JSDOMは、JavaScriptベースのヘッドレスブラウザであり、現実的なテスト環境を作成するために使用できます。

酵素を最大限に活用するには、Reactを初めて要求する前に、ドキュメントをグローバルスコープにロードすることをお勧めします。Reactのコードが実行される前に以下のスクリプトを実行することが非常に重要です。実行します。

結果として、以下のようなスタンドアロンスクリプトは一般的に良いアプローチです。

/* setup.js */

var jsdom = require('jsdom').jsdom;

var exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.Push(property);
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js'
};

詳細については、 酵素ドキュメント-JSDOM をお読みください

9
npm install --save-dev --save-exact jsdom jsdom-global

次に:

import 'jsdom-global/register'; //at the top of file, even before importing React

詳細 ここ

代替:酵素と一緒にjestを使用している場合-

あなたのpackage.json、次のようにjestのテスト環境をjsdomとして指定します。

"jest": {
  "testEnvironment": "jsdom"
}

私は同じ問題に直面しました、そしてそれは私にとってうまくいきました。

6
Vishal Gulati

テストファイルの先頭に次のものを置くだけです

/**
 * @jest-environment jsdom
*/
2
Yousef Irman