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
160
0

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

More Decks by Yoan Pratama Putra

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

Other Decks in Programming

See All in Programming
Hono + Inertia + React で LP を構築した話
Avatar for Yuka Ooka oukayuka
2
120
生成AI導入の「期待外れ」を乗り越える ー 開発フロー改革が目指す、真の組織変革
Avatar for starfish719 starfish719
0
5k
わからない話を追いかけたら、プログラミング言語を作る側にいた
Avatar for ydah ydah
3
530
【QA Test Talk Vol.8】AI-DLC による Whole Team Approach の加速
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
220
仕様駆動開発の消費期限
Avatar for watany watany
20
8.8k
ここ半年くらいでAIに作らせたR用ツール
Avatar for eitsupi eitsupi
0
400
FastAPI の並行処理モデルを完全に理解する
Avatar for Yuki Ishikawa hoto17296
6
2.3k
Webエンジニアなのにブラウザの仕組みがわからないので、Pythonで自作してみた
Avatar for Tatsuki tatsuki12
4
940
AIを紡ぐPMのお話
Avatar for swdtkuy swdtkuy
0
120
自動化したのに回らないテスト運用の壁ーAI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
1
150
Discordを用いたラボオートメーション関連情報収集の自動化
Avatar for noguhiro2002 noguhiro2002
0
220
freeeにおけるEvalsの実践例の紹介
Avatar for freee freee
PRO
0
140

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.2k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
770
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.5k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
Side Projects
Avatar for Sacha Greif sachag
455
43k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
1
34k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
370
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
270
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
350

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