まさたか日記スマートフォン用の表示で見るまさたか日記2017-08-26Jest+EnzymeでReactコンポーネントをテストするTypeScript/NodeJestはそもそもReactアプリをテストするためにあるのだと思うのですよ。作り手が同じFacebookだし、ドキュメントにもそういうことを言ってます。そこでJestでReactをテストしようとドキュメントにあたるとAirbnbの作るEnzymeを使うことを推奨されていました。FacebookとAirbnbの遭遇です。}enzyme、jsdom、react-test-rendererを新たにインストールします。私はReactが最新版なのでreact-test-renderer。なければインストールドキュメントに従って違うものに変える。jest設定に"setupFiles"エントリを足します。global);EnzymeのためにJsDOMをglobalにアタッチしてヘッドレスに描画できるようにします。これはJasumineでもやりました。react-tap-event-pluginもここで起こしておきます。テスト対象のReactコンポーネントのソース。}}次いでテストのコード。CSSセレクターモドキはReactコンポーネントをチェーンしたこんな書き方もできる。});});Enzymeにはmountを用いてフルにDOMレンダリングしてます。レンダリング方法は他にshallowレンダリングとstaticレンダリングがありますが、親子で関係しあうコンポーネントのテストを行いたかったので、shallowでは一通り書いて見てダメだった。mountによるフルDOMレンダリングではshallowでできることができた上でそれ以上のことができるので、一つやり方を習熟するのを求めるのであればmountでしょう、きっと。jest.fn()で作ったモックをcomponentWillMountでちゃんと呼ばれているかを確かめたり、イベントを発火させてステートの変化をテストしたりできます。構造としてはこのようにReactコンポーネント-その描画内容、というようにツリーが作られますので、findで探す時に、ToolbarTitleとかIconButtonで探せます。全部描画してるのでdivなどHTMLタグでも探せ、検索結果で複数返って来たときは.first()や.last()、.at(index)などで探します。findで引数に渡すのはCSSセレクターモドキなのでかなり柔軟に探せるけど、CSSセレクターを完璧に実装しているわけじゃないみたいで、思ったように引っ掛けない時がありました。慣れるまではここだけちょっと難しい。ちなみにshallowレンダリングするとまるっきり構造の違うものが作られます。簡単にReactコンポーネントのテストが書けます。テスト対象の完成ソースを見ながらならテスト書けるけど、テストファーストでの初回ラウンドでバッチリ書くのは難しいかな。v3昨日から日本に来てます。Technology(米国)はてなブログをはじめよう!masataka_kさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。