Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Painless UI Testing With Jest

Avatar for Yoan Pratama Putra Yoan Pratama Putra
April 19, 2017
Programming
0
160

Painless UI Testing With Jest

This is slides from my talk at F8 Meetup Malang on 19 April 2017

Avatar for Yoan Pratama Putra

Yoan Pratama Putra

April 19, 2017
Tweet

More Decks by Yoan Pratama Putra

See All by Yoan Pratama Putra
Testing React Using Jest
Avatar for Yoan Pratama Putra oshimayoan
1
120

Other Decks in Programming

See All in Programming
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
180
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
190
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
690
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
2.6k
Claude Codeと2つの巻き戻し戦略 / Two Rewind Strategies with Claude Code
Avatar for 果物リン fruitriin
0
140
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
430
CSC307 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
670
要求定義・仕様記述・設計・検証の手引き - 理論から学ぶ明確で統一された成果物定義
Avatar for Kuniwak orgachem
PRO
1
160
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
780
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
140

Featured

See All Featured
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
200
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.9k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
120
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k

Transcript

  1. PAINLESS UI TESTING WITH JEST YOAN PRATAMA PUTRA

  2. TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING

  3. WHY TESTING?

  4. PAINLESS UI TESTING WITH JEST - KODEFOX ▸ To find

    bugs ▸ To find defects ▸ To ensure what we create does not break ▸ To ensure what we create does what it is supposed to do

  5. HOW TO DO TESTING?

  6. None

  7. PAINLESS UI TESTING WITH JEST - KODEFOX ▸ Fast ▸

    Easy Setup ▸ Instant Feedback ▸ Snapshot Testing ▸ From Facebook

  8. PAINLESS UI TESTING WITH JEST - KODEFOX ▸ Watch mode

    ▸ Mock modules and functions ▸ Mock react native components ▸ Mock react native platform OS FEATURES
  9. None
  10. None

  11. WHAT ABOUT UI COMPONENTS?

  12. SNAPSHOT TESTING

  13. None

  14. expect(component).toMatchSnapshot() get the output of the function save it into

    a .snap file has saved snapshot? compare snapshots

  15. SNAPSHOT TESTING PASS FAIL CHANGED BUG

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None

  23. WHAT WILL HAPPEN?

  24. None
  25. None

  26. SNAPSHOT TESTING PASS FAIL CHANGED BUG

  27. WHAT WILL HAPPEN?

  28. None

  29. SNAPSHOT TESTING PASS FAIL CHANGED BUG

  30. PAINLESS UI TESTING WITH JEST - KODEFOX BENEFITS OF SNAPSHOT

    TESTING ▸ Automated process ▸ Adapt to changes ▸ Easy to maintain

  31. Thank you! @oshimayoan oshimayoan/testing-react-demo