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

Painless UI Testing with Jest

Avatar for Andi N. Dirgantara Andi N. Dirgantara
April 19, 2017
Programming
1
140

Painless UI Testing with Jest

This slides was presented on f8meetupmalang2017.splashthat.com by Yoan Pratama Putra from KodeFox.

Avatar for Andi N. Dirgantara

Andi N. Dirgantara

April 19, 2017
Tweet

More Decks by Andi N. Dirgantara

See All by Andi N. Dirgantara
Building Scalable and Flexible API by Leveraging GraphQL and BigTable
Avatar for Andi N. Dirgantara hellowin
0
80
How Traveloka Handle Data Pipeline for Big Things?
Avatar for Andi N. Dirgantara hellowin
4
620
Data Lake Implementation in Traveloka
Avatar for Andi N. Dirgantara hellowin
2
330
How Big Data Platform Handle Big Things
Avatar for Andi N. Dirgantara hellowin
1
140
How Big Data Works in Sale Stock
Avatar for Andi N. Dirgantara hellowin
4
500
Interactive Animations with React Native
Avatar for Andi N. Dirgantara hellowin
0
160
Loopback Framework for Developing REST API with Node.js
Avatar for Andi N. Dirgantara hellowin
1
150
Facebook Developer Circle: Malang - Initial Meet Up
Avatar for Andi N. Dirgantara hellowin
0
110

Other Decks in Programming

See All in Programming
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
Avatar for Tomoya Miwa tomoya0x00
0
4.3k
詳解！defer panic recover のしくみ / Understanding defer, panic, and recover
Avatar for convto convto
0
250
Cache Me If You Can
Avatar for RyuNen344 ryunen344
2
4k
個人開発で徳島大学生60％以上の心を掴んだアプリ、そして手放した話
Avatar for akidon0000 akidon0000
1
150
@Environment(\.keyPath)那么好我不允许你们不知道！ / atEnvironment keyPath is so good and you should know it!
Avatar for Elvis Shi lovee
0
130
概念モデル→論理モデルで気をつけていること
Avatar for sunnyone sunnyone
3
300
Azure SRE Agentで運用は楽になるのか？
Avatar for KAMEGAWA Kazushi kkamegawa
0
2.5k
より安全で効率的な Go コードへ： Protocol Buffers Opaque API の導入
Avatar for shoyan shwatanap
2
780
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
Avatar for dafujii dafujii
1
640
Testing Trophyは叫ばない
Avatar for toms toms74209200
0
890
ファインディ株式会社におけるMCP活用とサービス開発
Avatar for starfish719 starfish719
0
2.1k
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
Avatar for Holly Cummins hollycummins
0
100

Featured

See All Featured
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
820
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.7k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
9.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
930
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Done Done
Avatar for chrislema chrislema
185
16k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
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