今回は、こちらのReactテストコードのworkshopの視聴した内容から学んだことを書いていきます。https://www.udemy.com/react-redux/learn/v4/overviewworkshopで使ったリポジトリは以下になります。長くなったので次回テストコードを書く際に使うパッケージVue.jsのときもそうだったんだけれども、テストコードを書くにあたっては、いろんな観点・手法が存在するみたい。今回は、以下のパッケージをつかっていくよ!説明はとてもてきとうなので、使用例だったり、公式ドキュメントだったり、動画をみてもらったほうがいいかも。javascriptのテストを行うための、テストフレームワークjest-dom:jestのマッチャ関数をDOMの検証用に便利に拡張したものdom-testing-library:ユーザー目線でDOMを検索・取得できるライブラリreact-testing-library:dom-testing-libraryをReact用に特化したライブラリいろいろ調べると、Reactのテストでは、enzymeという子コンポーネントをモックっぽい感じで使えるツールがよく使われているみたいなんだけど、今回は使われていない。Doddsさんが以下の記事で理由を語ってくれているので、どこかでがんばってよんでみる。blog.kentcdodds.com環境さきほどのリポジトリをcloneして、そのままやるのが一番はやい。なんだけど、自分の勉強もかねてテスト環境は、create-react-appでつくることにするよ。いえcreate-react-appでつくってもデフォルトでjestが使えるのでとくにすることはない。react-testing-libraryとjest-domのみあとから追加しよう。jest-domこんな感じになりました。},※devDependenciesにいれればよかった。準備src配下に__tests__ディレクトリを作成し、その配下にsimple-test.jsを作成する。jestでは、__tests__ディレクトリ配下のファイルがテストコードと認識される。yarn.lockまた、テストコードをどこにおくかについては、同じく以下の記事に言及されてました。blog.kentcdodds.com__tests__よりコンポーネントと同じ階層で運用したほうががわかりやすいのかな?とりあえずテストを実行してみるテスト対象がそもそもないんだけど、jestがどんなものか確認するために、こんな感じのテストを書いてみます。expect(sum).toBe(2)})expectだったりマッチャ関数であるtoBe()等については公式ドキュメントを読んでみよう。jestjs.ioテストを書いたら、実行してみます。run.create-react-appのテストスクリプトは、デフォルトwatchモードで起動するみたいです。上記のように、一度テストが実行されたあとに、watchモードのコマンドを叩くことができます。テスト対象だけをファイル名で絞ったり等できるのですが、テストファイルもひとつしかないので、そのまま使うことにします。ためしに、テストコードを変更してみると再度テストが走りますね。テスト対象のコンポーネントを書く、その前にコンポーネントのテストを書く前に、どうやってテストをするのかを、Reactを使わないで、純粋にDOMを操作して確認してみます。いうことで、テストコードをこんな感じにしてみます。console.log(div.outerHTML)})上記のconsole.logの結果は以下になります。type="number"></div>みなれたHTMLが出力されてます。これに対して、inputタグのtypeがnumberであること、labelタグのテキストがHelloであることテストとして表現するとこんな感じになります。expect(div.querySelector('label').textContent).toBe('Hello')})当たり前ですが上記テストは無事パスします。これだけだとシンプルすぎて、一体何をテストしたんだろう、と思ってしまいますが、少なくともDOMを通して、想定したHTMLがレンダリングされるだろうということが確認できたよう気がします。コンポーネントをテストする早速、テスト対象のコンポーネントを書いていきます。機能がありませんが、こんな感じにしました。Form作ったコンポーネントを、テストコードでimportするようにします。expectを書く前に、Reactにより出力されるDOMがどんな感じか見てみます。console.log(div.outerHTML)})上記のconsole.logの結果は以下になります。name="age"><button>Submit</button></form></div>わかってる方には当然と思われるかもしれませんが、個人的に衝撃でした。DOMが!できている!ということは、Reactを使わないでやったときとおなじようなことができてしまいます。expect(div.querySelector('input').type).toBe('text')})おおーんすげえ!本格的なテストに入る前にさて、ここからは冒頭で紹介した以下のライブラリを使ってみよう。jest-dom:jestのマッチャ関数をDOMの検証用に便利に拡張したものdom-testing-library:ユーザー目線でDOMを検索・取得できるライブラリreact-testing-library:dom-testing-libraryをReact用に特化したライブラリjest-domさきほどのテストコードをさくっとjest-domを使って置き換えて見ます。'text')})今までは、DOMに対象のテキストが存在かなどを確認する際は、DOMのプロパティを意識する必要がありましたが、置き換え後は、その必要がなくなりましたね。上記以外にも便利そうなものがいっぱいあるので、公式を参照してみてください。github.comdom-testing-libraryこちらも、まずは置き換え後のコードを先に貼ります。//expect(div.querySelector('label')).toHaveTextContent('Name')})お?ってなりませんか。inputのノードを取得する際に、inputそのものを指定するのではなく、それに紐づくlabelを指定してます。いえば、そのラベルを取得するのも、labelのテキストを指定しています。こんな取得の仕方をしているんでしょうか。Doddsさんのフロントエンドのテストに対する考え方が反映されています。ここで綺麗にまとめることができれば、いいのですが自分もまだすっきりとしていないのですが、以下の記事が大変参考になります。qiita.com雑に書くと、フロントエンドは単体テストよりも、統合テストのほうがコストパフォーマンスもいいよね。ユーザーが意識しない内部の修正を行ったことにより、テストが通らなくなるとか、テストコードをメンテして行くだけで疲弊しちゃうよ。ユーザー目線のテストを多くしていこうよ。みたいな感じでしょうか。上記を受けてこちらのinputノードの取得の方法を見ると、なんとなくですが「ユーザーはinputタグそのものを認識しているわけではなく、inputに用意されているlabelを見てる」みたいなものが伝わってくる気がします。'text')})labelから取得する以外にも、テキストから検索するgetByTextだったり、コンポーネントの要素にdata-testid属性を付与しておいて、それをもとに取得するgetByTestIdだったりがあります。data-testidで取得と聞くと、もはやclassやid属性で取得すればいいのではと思ったりもしたのですが、クラス名を変えるとテストぶっこわれるでしょ!というところでしょうか。react-testing-library最後にreact-testing-libraryになります。こちらはdom-testing-libraryをラップしてReact用に特化したものなので、importする際は、react-testing-libraryをimportするように切り替えます。以下は、置き換えたあとのコードになります。'text')})上記では、divをつくってReactDOM.rederをして〜の流れがなくなり、さきほどりも、すっきりしましたね。上記ではrenderのみ使っていますが、テスト後にコンポーネントをunmoutするcleanupだったり、debug用関数があったりします。長くなったので次回イベントのテストだったり、肝心な部分を書こうとおもったのですが、長くなったので次回にします。19:44React.jsのテストコードWorkshopの内容まとめ(1)関連記事2019-02-17react-reduxを学ぶReduxをReactで使うときは、react-reduxを使うんだよ!と講座で...2019-01-28jestで特定のモジュールのみmockにするこっちでもmockの話を書いた。2019年になったので、どこかで去年の目標を見返してみよう...2018-12-29年末だしReactに入門する(1)UdemyのReactの講座を受ける機会があったので、備忘録がてら感...2018-11-08そろそろVue.jsでもテストコードを書いていこうVue.jsでわりといろいろつくっている今日このごろ。»プロフィール30歳からWebやらなんやらを学び始めた人のブログです。(4)検索はてなブログをはじめよう!konoemarioさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。