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
150
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
170
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
120

Other Decks in Programming

See All in Programming
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
Avatar for aose aoseyuu
3
870
CSC305 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
330
バッチ処理を「状態の記録」から「事実の記録」へ
Avatar for HideyukiKitao panda728
PRO
0
210
Claude Agent SDK を使ってみよう
Avatar for Hayami Shuhei hyshu
0
1.4k
外接に惑わされない自システムの処理時間SLIをOpenTelemetryで実現した話
Avatar for Kotaro7750 kotaro7750
0
130
NixOS + Kubernetesで構築する自宅サーバーのすべて
Avatar for ichi-h ichi_h3
0
1.3k
KoogではじめるAIエージェント開発
Avatar for hiro hiroaki404
1
200
O Que É e Como Funciona o PHP-FPM?
Avatar for Marcel dos Santos marcelgsantos
0
240
オープンソースソフトウェアへの解像度🔬
Avatar for うたもく utam0k
18
3.2k
三者三様 宣言的UI
Avatar for Keita Kagurazaka kkagurazaka
0
290
Webサーバーサイド言語としてのRustについて
Avatar for kaza kouyuume
1
5k
Register is more than clipboard
Avatar for Satoru Kitaguchi satorunooshie
1
160

Featured

See All Featured
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Docker and Python
Avatar for Tania Allard trallard
46
3.6k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
940
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
22k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
8
320
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
710
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
930

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