react+reduxでRedux DevToolsで生成されるテストを活用

以下、react+reduxはセットアップ済みが前提となります。

Jestセットアップ

npm install --save-dev jest

package.jsonに以下を追加

{
  "scripts": {
    "test": "jest"
  }
}

参考ページ

Getting Started

Babelセットアップ

npm install --save-dev babel-jest babel-core regenerator-runtime

プロジェクトのルートフォルダーに .babelrcファイルを追加して、以下を記述。

{
  "presets": ["env", "react"]
}

参考ページ

Babel を使用する

Redux DevToolsセットアップ

以下から使用するブラウザに応じてインストール
Installation

Chromeの場合は → Redux DevTools

createStoreの引数を以下のように調整

 const store = createStore(
   reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

参考ページ

With Redux

テスト作成

Redux DevToolsのTest欄からコピペでテスト作成。importなどは適当に調整。
ツールは以下参照。Test欄は動画のレイアウトだと右端中央あたり。

#memo https://t.co/0pWViKm5JK

— m (@m3816) 2018年12月14日

動作確認

プロジェクトルートでnpm run testでテストがスタートするはずです。