前回はクリックイベントのテストを行った。 今回は、DOMが正しくレンダリングされているかのテストを行う。 正確には、DOMではなくて、仮想DOMであり、コンポーネントと言ったほうがいいのだと思う。 テストの対象となるコード まずは、テストの対象となるコ…

前回の記事はこちら。 JestでReactのテストをする(1) 導入編 前回で、JestとReactの環境構築が終わった。 以降は、個人的に特に習得したいと思っている、イベントとDOMのテストに取り組む。 今回は、イベントのテストについて。 クリックイベントの挙動をテ…

先日、以下の記事を見つけた。 Facebook製のJavaScriptテストツール「Jest」の逆引き使用例 - Qiita 非常に分かりやすくまとまっており、「これなら自分にも出来るかも」と思えた。 この記事では例としてReactをテストしており、丁度Reactのテスト方法を探し…

JavaScriptでは、オブジェクトが格納されている変数を他の変数にコピーすると、そのオブジェクトへの参照がコピーされる。 そのため、元となるオブジェクトの値を変更すると、コピー先のオブジェクトにも変更が反映されてしまう。逆も然り。 let obj1 = {val…

http://numb86.net/tech/food-health-react/ 3週間ほど前、Food Health APIに栄養素のデータを追加した。 これで、食品データと組み合わせることで例えば、1日の食事の内容を入力して不足している栄養素は何か調べる、ということも一応可能になった。 また、…

JavaScriptには元来、モジュール機能が存在しなかった。 そこで、Node.jsではmodule.exportsという機能を導入してモジュール機能を実現し、さらに、その機能をブラウザでも利用できるようにするためのツールとしてbrowserifyなどが開発された。 そういった話…

Reactでは、propsを使って値の受け渡しが出来るが、その値の型をチェックする仕組みが用意されている。 それがpropTypesである。 詳しくは下記を参照。 再利用可能なコンポーネント | React React.jsのProp - Qiita 誤った型のデータが渡された場合、コンソ…