Reactの私の酵素スナップショットテストがdocument.getElementById（）コールで失敗するのはなぜですか？

Question

入れ子のReactコンポーネントのSnapshotテストをレンダリングしようとしていますが、テストコードがdocument.getElementById（）リクエストを処理できません。コンポーネントの関連するコードセクションはここにある：

componentDidMount =() => { 
    let scrollbarWidth = appScrollbarWidth(); 
    let headerWrapper = document.getElementById(this.headerWrapperId); 
    headerWrapper.style.right = scrollbarWidth +"px"; 
    document.body.setAttribute("style", "padding-left:" + scrollbarWidth * 0.8 + "px;"); 
    }; 

（酵素を使用して）ユニットテストコードはここにある：

describe("GridRows Snapshot",() => { 
    it("renders a Snapshot without error",() => { 
    const component = mount( 
     <GridRows wrapperId = {"dummyId"} 
     headerWrapperId = {"dummyheaderId"} 
     dataWrapperId = { "dummydataId"} 
     dataArray = {rowDefsArray} 
     columnClassNameAddOn = {"grid-layout-8cols"} 
     /> 
    ); 
    expect(component.getElements()).toMatchSnapshot(); 
    }); 
}); 

私がテストを実行すると、私はこのエラーを取得：

TypeError: Cannot read property 'style' of null 

この行を参照する

：

headerWrapper.style.right = scrollbarWidth +"px"; 

回避策として、このような失敗したコードをバイパスして、 スナップショットを美容上の変更だけで続けることができ、実際の出力を変更しません。

componentDidMount =() => { 
    let scrollbarWidth = appScrollbarWidth(); 
    let headerWrapper = document.getElementById(this.headerWrapperId); 

    if (headerWrapper) { 
     headerWrapper.style.right = scrollbarWidth +"px"; 
    } 

    document.body.setAttribute("style", "padding-left:" + scrollbarWidth * 0.8 + "px;"); 
    }; 

修正なしでこの作業を行うには何か不足していますか？

Answer 1

私は、documentを試してみる必要があると思います。あなたのグローバルなテスト・セットアップ・ファイルで

、この追加：

global.window = document.defaultView

をそして、個々のテストでは、あなたはbeforeEach

などでグローバル嘲笑文書に異なる特性や機能をスタブすることができます： document.getElementById =() => {}

希望はこれがある。ここ

Answer 2

を支援しますテスト用のDOM要素を作成する改訂スナップショットユニットテスト

describe("GridContainer Snapshot",() => { 
    it("renders a Snapshot without error",() => { 
    const headerWrapperId = "PlanOverallResultsgrid1-header-wrapper" 
    const headerWrapper = global.document.createElement("div") 
    headerWrapper.id = headerWrapperId 
    global.document.body.appendChild(headerWrapper) 
    const component = mount(
     <GridContainer 
     tab_key={1} 
     id={"PlanOverallResultsgrid1"} 
     chart_name={chart_name} 
     data_object={chartcontent} 
     /> 
    ) 
    expect(component.getElements()).toMatchSnapshot() 
    }) 
}) 

私はエンザイムズのマウント方法は分かりません。マウントがすべてのDOMをレンダリングしたと思った。 document.getElementById（）が動作するために必要なコンポーネントは、GridContainerの子コンポーネントでした。これは、子が検索したいDIVをレンダリングするDIVをレンダリングします。では、どうして嘲笑が必要なのですか？