Edited at

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欄は動画のレイアウトだと右端中央あたり。



動作確認

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