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
120

Other Decks in Programming

See All in Programming
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
Avatar for ShoheiMitani shoheimitani
4
700
TiDBのアーキテクチャから学ぶ分散システム入門 〜MySQL互換のNewSQLは何を解決するのか〜 / tidb-architecture-study
Avatar for DPon dznbk
1
150
Oxlintとeslint-plugin-react-hooks 明日から始められそう？
Avatar for t6adev t6adev
0
120
Xdebug と IDE による デバッグ実行の仕組みを見る / Exploring-How-Debugging-Works-with-Xdebug-and-an-IDE
Avatar for shin1x1 shin1x1
0
360
ハンズオンで学ぶクラウドネイティブ
Avatar for Tatsuki Minami tatsukiminami
0
110
Radical Imagining - LIFT 2025-2027 Policy Agenda
Avatar for LIFT lift1998
0
250
条件判定に名前、つけてますか？ #phperkaigi #c
Avatar for Hiromi Hishida 77web
2
1k
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
1.8k
仕様漏れ実装漏れをなくすトレーサビリティAI基盤のご紹介
Avatar for Kuniwak orgachem
PRO
9
5.4k
事業会社でのセキュリティ長期インターンについて
Avatar for inlet-back masachikaura
0
240
Mastering Event Sourcing: Your Parents Holidayed in Yugoslavia
Avatar for Marek Matulka super_marek
0
150
PDI: Como Alavancar Sua Carreira e Seu Negócio
Avatar for Marcel dos Santos marcelgsantos
0
110

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
How to make the Groovebox
Avatar for あそなす asonas
2
2.1k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
200
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Side Projects
Avatar for Sacha Greif sachag
455
43k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.7k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k

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