2021.10.15この記事は約4分で読めます。目次はじめによくある書き方Jestによるテストで起こる問題<Provider>を切り出すまとめはじめに各コンポーネントに、ReduxのStoreで管理する状態を渡すとき<Provider>を使用しますよね。これをルート直下でindex.jsとかApp.jsとかにガッツリ書かずにファイル分割させておくだけで、Jestのテストが書きやすくなります。/>以下のコンポーネントがStore内の状態にアクセスできるようにする。document.querySelector('#app'));Jestによるテストで起こる問題Jestでコンポーネントのテストをする場合、通常コンポーネントは単体で呼び出され、DOMツリーを構成しません。したがって、<Provider>と繋がってない状態のコンポーネントになります。/>からツリー状にDOMが構成されます。一方で、Jestなどテストツールにおいては、コンポーネントはブラウザを通してマウントされるわけではなく、いわば仮想的に単体でマウントした状態になります。<Provider>でラップされていない状態でコンポーネントがマウントするので、そのコンポーネント内でStoreの情報を使用していると当然テストは落ちてしまいます。<Provider>を切り出す<Provider>は別ファイル(ここではRoot.js)に切り出し、テストでも自由に呼び出して使えるようにします。</Provider>);つまり、index.jsは以下のように変更されます。