はエラーをテスト反応：あなたが呼ばれるように見えます `マウント（）`グローバル文書がロードされることなく

Question

index.spec.jsファイル：

import React from 'react'; 
import { mount } from 'enzyme'; 
import Header from './'; 
import { expect } from 'chai'; 

describe('header component',() => { 
    let renderedOutput; 
    beforeEach(() => { 
    renderedOutput = mount(<Header />) 
    }) 

    describe('initial state',() => { 
    it('renders the header',() => { 
     expect(renderedOutput).to.exist(); 
    }); 
    it('renders the header',() => { 
     expect(renderedOutput).to.be.present(); 
    }); 
    }) 
}); 

実行スペックとそれがで失敗します。 Error: It looks like you called mount() without a global document being loaded.

私はjsdomについて何かを読んだことがありますが、なぜそれを追加するのか分かりませんでした。誰も私が間違っていることを説明する？

Answer 1

まず、問題を解決する2つのことをお勧めします。まず、それぞれの説明でマウントを実行します。これは、各テストを互いに独立させる必要があるためです。あなたの前に戻って、それぞれのテストをきれいな状況で始める方が良いです。

もう一つの提案として、もっと多くのテストがあるかもしれませんが、この場合、コンポーネントがマウントされていることをテストしているだけなので、の代わりにshallowを使用でき、コンポーネントは浅いモードこれは速くなりますが、反応のすべてのライフサイクルイベントを引き起こすことはありません。

Your final code should look like the following

import React from 'react'; 
import { shallow } from 'enzyme'; 
import Header from './'; 
import { expect } from 'chai'; 

describe('header component',() => { 
    describe('initial state',() => { 
    it('renders the header',() => { 
     const renderedOutput = shallow(<Header />) 
     expect(renderedOutput).to.exist(); 
    }); 
    it('renders the header',() => { 
     const renderedOutput = shallow(<Header />) 
     expect(renderedOutput).to.be.present(); 
    }); 
    }) 
}); 

は、それが動作するかどうか、それは、あなたともっと重要に理にかなっているなら、私に教えてください。

Aditionallyあなたはここで、この関連の記事を参照してください、あなたが言及としてjsdomを含める必要があります。DOMを必要としますが、中にまだなっていない場合は、JSDOMはマウントを使用するために必要とされるError: It looks like you called `mount()` without a global document being loaded

Answer 2

を酵素のは、APIを実装するのでブラウザ環境（すなわち、ノード環境）である。

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

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

：

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

詳細情報here。代替

：あなたのpackage.jsonで

次のように、"jsdom"として冗談のためのテスト環境を指定します。

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

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