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
75
How Traveloka Handle Data Pipeline for Big Things?
hellowin
4
610
Data Lake Implementation in Traveloka
hellowin
2
310
How Big Data Platform Handle Big Things
hellowin
1
130
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
僕がつくった48個のWebサービス達
yusukebe
18
17k
Vue.js学習の振り返り
hiro_xre
2
130
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.6k
VR HMDとしてのVision Pro＋ゲーム開発について
yasei_no_otoko
0
110
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.5k
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.3k
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
410
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
240
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
250
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k

Featured

See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Code Review Best Practice
trishagee
64
17k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Writing Fast Ruby
sferik
626
61k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
4 Signs Your Business is Dying
shpigford
180
21k
Building Applications with DynamoDB
mza
90
6.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Making Projects Easy
brettharned
115
5.9k
Building an army of robots
kneath
302
42k

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