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

Painless UI Testing With Jest

Avatar for Yoan Pratama Putra Yoan Pratama Putra
April 19, 2017
Programming
0
150

Painless UI Testing With Jest

This is slides from my talk at F8 Meetup Malang on 19 April 2017

Avatar for Yoan Pratama Putra

Yoan Pratama Putra

April 19, 2017
Tweet

More Decks by Yoan Pratama Putra

See All by Yoan Pratama Putra
Testing React Using Jest
Avatar for Yoan Pratama Putra oshimayoan
1
120

Other Decks in Programming

See All in Programming
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
Avatar for Takumi Abe east_takumi
0
390
AI時代のUIはどこへ行く？
Avatar for Yusuke Wada yusukebe
18
8.9k
Vue・React マルチプロダクト開発を支える Vite
Avatar for ANDPAD inc andpad
0
110
意外と簡単！？フロントエンドでパスキー認証を実現する WebAuthn
Avatar for teamLab teamlab
PRO
2
750
FindyにおけるTakumi活用と脆弱性管理のこれから
Avatar for adachi.ryo rvirus0817
0
510
はじめてのMaterial3 Expressive
Avatar for yume ym223
2
740
Oracle Database Technology Night 92 Database Connection control FAN-AC
Avatar for oracle4engineer oracle4engineer
PRO
1
440
さようなら Date。 ようこそTemporal！ 3年間先行利用して得られた知見の共有
Avatar for 8-beeeaaat!!! 8beeeaaat
3
1.4k
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
Avatar for Jonghyuk Max Kim mmmaxkim
0
1.6k
Kiroで始めるAI-DLC
Avatar for kaonash kaonash
2
590
Design Foundational Data Engineering Observability
Avatar for suci sucitw
3
200
ファインディ株式会社におけるMCP活用とサービス開発
Avatar for starfish719 starfish719
0
1.5k

Featured

See All Featured
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
Faster Mobile Websites
Avatar for Dean Hume deanohume
309
31k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
188
55k
The Language of Interfaces
Avatar for Des Traynor destraynor
161
25k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k

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