node?テストに戻りますexpect(localThis.todos[0]).toEqual({})オブジェクトの検証はtoEqualを使います。==みたいな感じです。配列の数で適当にやってます。スタートさせていますとりあえずコンテナーは一旦作れたので次は子コンポーネントに移ります。tests/unit/TodoItem.spec.jsテスト書きましょう。todo一つだけわたします。中身が渡っていきます。エラーが出てきたので作ります。}}</script>いい感じ。渡ってきたらラジオボタンがちゃんとレンダリングされて、しかもcheckedがつくかチェックします。存在しないって怒られました。}}</script>これでテストがパスするはずです。checkedの値をhtmlにバインドしてあげるところです。})自分はcheckedがfalseのときも一応チェックしていましたがそれはお好みにまかせます。次はラジオボタンをクリックしたら親コンポーネントにemitする親コンポーネントのtodosが書き換わったらpropsとして渡されて自動にチェックボックスのチェックも書き換わるということで親コンポーネントにemitするところまで書きましょう。})既存の知識だけでもうこのテストは理解できると思います。ラジオボタンのクリックイベントでテキストをemitするメソッドを発火させます。渡すのはtodoのidにしましょう。}}</script>完成形。親コンテナーに戻る最初の図間違っていたので修正しました。こんな感じでいきましょう。})todosからidでfindして、チェックをいれたり外したりする関数を作ります。}メソッドに追加したらpassしました。></TodoItem></div></template>結合する、ブラウザテスト最終的に少し修正しました。コンポーネントに登録してなくてエラーでたのが2箇所。結論として言いたいのは簡単な内部ロジックで構成されているコンポーネント開発だと簡単にTDDできるよ私の経験だと3ヶ月くらいずっとテスト書き続けていたら、TDDできるようになると思うStorybookでHot-reloadで開発してもいいと思うけどな!これは得意な人がつきっきりで、チュートリアルな形ならやれるものであって、決してVue-test-utils初心者の方ができるものではない気がしてきました。参考資料2018年Vue.jsとVuexを使ってる人に提案するコンポーネントの分類と設計パターン2018年今更主張する、フロントエンドでなぜテストをするのかおわりにいかがでしたか?開発終了まで一度もブラウザを見ずに開発できました。黒い画面(vim)好きなかたはぜひ。TDDやれって言いたいわけじゃないですが、ロジック層だとTDDやってもいいと思うけど、それよりもまずは簡単なところからでもいいからテストを書いていって、Vue-test-utilsのAPI覚えて、テストに慣れていってください。決めたらいいと思います。Vue.js)Follow株式会社オープンロジ物流はこれから、テクノロジーによりダイナミックに変化する業界です。物を作る人とそれを欲しい人、その間の物流や配送がすべてネットワーク化された、需要と供給が最適化される次世代のインフラづくりを私たちは目指しています。upLoginユーザーは見つかりませんでした。