JavaScript
webpack
jest
React

Jestで一部のReactコンポーネントだけテストする方法

重要度の高いコンポーネントのみテストを書きたい!

開発しているうちに、いつの間にかReactコンポーネントがたくさんになっていた。
react-boilerplateを使っていたら、testファイルもコンポーネント生成コマンドで一緒に生成されるので、デフォルトでjestコマンドを走らせたら、すべてのコンポーネントがテスト対象となります。

https://github.com/react-boilerplate/react-boilerplate

かといって、すべてのテスト書くのきついっす

コンポーネントの中にもこれだけは挙動を確認したい!というものあるはず!
一旦、一部だけのコンポーネントをテストしていって、後々、そんなに優先度の高くないコンポーネントのテストを
書いていけばええやないか!

package.json

scriptを用意する。--configオプションをつけてjsonファイルでコンフィグを設定できます。(そもそもpackage.json内にdefaultのconfigがあるので、今回は別configファイルを読み込んでいます)

package.json

  "scripts": {
    "test": "jest  --config ./test-config/jest-ui.config.json"
  }

configの中身

-testPathDirでどのコンポーネントをテストしたいかを決めます(複数あれば、配列内に複数)。
-moduleDirectoriesでどこにモジュールがあるかを教えてあげる。

./test-config/jest-ui.config.json
{
  "testPathDirs": ["app/components/GreetButton"],
  "moduleDirectories": ["node_modules", "app" ]
}