Reactコンポーネントをテストする前にDOMを模擬する方法はありますか？

Question

私はReactクラス（TestUtils、Enzyme、Jestを使用して）をテストしようとしていますが、いくつかの対処方法があるため、サーバーレンダリングされたHTMLページの要素、レンダリングする前に、componentDidMountのDOMから特定の要素を取得します。たとえば：

componentDidMount() { 
    document.documentElement.classList.add('example'); 
    this.someOtherFunction(document.getElementsByClassName('my-great-className')) 
} 

私は、このコンポーネントをテストしたいのですが、サーバー・レンダリングされたHTMLページがテストに存在しないため、もちろんcomponentDidMountの関数は失敗します。 Reactコンポーネントをレンダリングする前に、特定のDOMを模擬する方法はありますか？

Answer 1

あなたはあなたがちょうどaddがexampleで呼び出されたことを確認することができ、あなたのテストでは、テスト

global.document = { 
    documentElement: { 
    classList: { 
     add: jest.fn() 
    } 
    } 
    getElementsByClassName: jest.fn({id:'id'}) 
} 

を開始する前に、単にものを設定することができ、someOtherFunctionこと{id:'id'}と呼ばれていました。 すべてのテストファイルは独自のサンドボックスで実行されるため、このようなドキュメントモックを完全に安全に設定できます。