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

Painless UI Testing with Jest

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.

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
hellowin
0
76
How Traveloka Handle Data Pipeline for Big Things?
hellowin
4
620
Data Lake Implementation in Traveloka
hellowin
2
310
How Big Data Platform Handle Big Things
hellowin
1
140
How Big Data Works in Sale Stock
hellowin
4
490
Interactive Animations with React Native
hellowin
0
140
Loopback Framework for Developing REST API with Node.js
hellowin
1
140
Facebook Developer Circle: Malang - Initial Meet Up
hellowin
0
110

Other Decks in Programming

See All in Programming
JavaScriptツール群「UnJS」を5分で一気に駆け巡る！
k1tikurisu
10
1.8k
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
Introduction to kotlinx.rpc
arawn
0
630
Immutable ActiveRecord
megane42
0
130
Open source software: how to live long and go far
gaelvaroquaux
0
620
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
SwiftUI Viewの責務分離
elmetal
PRO
0
150
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Honoとフロントエンドの 型安全性について
yodaka
4
250
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210

Featured

See All Featured
We Have a Design System, Now What?
morganepeng
51
7.4k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Adopting Sorbet at Scale
ufuk
74
9.2k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Producing Creativity
orderedlist
PRO
343
39k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Thoughts on Productivity
jonyablonski
69
4.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Building Adaptive Systems
keathley
40
2.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Facilitating Awesome Meetings
lara
51
6.2k

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