2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-01-05

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

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

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

#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" ]
}
2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?