コンポーネントテストの戦略について

Transcript

1. コンポーネントテストの戦略について issei1213
2. About me 名前：issei1213（三浦 壱生） 所属会社：合同会社ノマドリ 技術スタック：React / Vue.js / TypeScript 好きな言語：TypeScript
3. 冗談はさておき、アジェンダ - なぜこのタイトルを話そうと思ったのか - Avoid Nesting when you're Testingの概要 - テストサンプルコード - 感想
4. - 書籍「フロント開発のためのテスト入門」の中で紹介されていた記 事があり、とても感動したので共有したかった。 - 「Avoid Nesting when you're Testing(テスト中のネスティングを避 ける)」という内容の記事だが、コンポーネントテストの書き方が非常 に参考になる。 なぜこのタイトルを話そうとおもっ たのか
5. Avoid Nesting when you're Testingの概要 - 過度な抽象化をやめる - beforeEachやletなどを使って過度に抽象化すると可読性が悪くなる - ネストをやめる - 変数が多くなり追跡作業が増えてしまう - 変数の再割当てを避けるべき - 上記を実施するために、AHA Testingを行う - Avoid Hasty Abstraction(性急な抽象化を避ける)の略
6. テストサンプルコード①(テスト対象) 実際のDOM
7. テストサンプルコード②(Jest) 問題：このテストコードの問題点はわかりますか？
8. テストサンプルコード③(問題点)
9. テストサンプルコード④(問題点) では、どうするか？
10. インライン化しちゃう 重複コードが増えてしまう。。。
11. AHA Testingを適用
12. 実際のテストケース
13. 感想 - コンポーネントテストの書き方がいまいち分からなかったため、大変に参考 になった - setup関数は人によって書き方が変わりそうなので、一度チーム全体で共通 認識を作る必要がありそう - コンポーネントテストで迷っている人は、今回紹介した記事を一度みてみる と温度感はつかめるかなと思った
14. 参考記事 - Avoid Nesting when you're Testing - AHA Testing 💡 - フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テ スト戦略の必須知識
 - https://www.shoeisha.co.jp/book/detail/9784798178639