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
130

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
77
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
320
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
型付きアクターモデルがもたらす分散シミュレーションの未来
Avatar for Takatomo Torigoe piyo7
0
800
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
Avatar for uki00a uki00a
0
130
Team topologies and the microservice architecture: a synergistic relationship
Avatar for Chris Richardson cer
PRO
0
950
C++20 射影変換
Avatar for Akira Takahashi faithandbrave
0
500
Webからモバイルへ Vue.js × Capacitor 活用事例
Avatar for Naoki Haba naokihaba
0
740
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
Avatar for nrs nrslib
1
190
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
Avatar for Márton Braun zsmb
1
120
複数アプリケーションを育てていくための共通化戦略
Avatar for irof irof
10
4k
Gleamという選択肢
Avatar for Comamoca comamoca
6
740
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
Avatar for Shohei Okada okashoi
1
150
コード書くの好きな人向けAIコーディング活用tips #orestudy
Avatar for Hiromi Hishida 77web
3
330
Bytecode Manipulation 으로 생산성 높이기
Avatar for Daekyu bigstark
2
360

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
41
7.3k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
34k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.4k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k

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