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
78
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
[Codecon - 2025] Como não odiar seus testes
Avatar for Camila Campos camilacampos
0
100
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
Avatar for shunghsiyu shunghsiyu
0
170
MySQL9でベクトルカラム登場！PHP×AWSでのAI/類似検索はこう変わる
Avatar for Suguru Ohki suguruooki
1
280
なぜあなたのオブザーバビリティ導入は頓挫するのか
Avatar for ryotaro kobayashi ryota_hnk
5
560
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
Avatar for ShuyaKinjo shuyakinjo
0
200
DataformでPythonする / dataform-de-python
Avatar for snhryt snhryt
0
150
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
Avatar for のんちゃん non0113
2
250
Gemini CLIの"強み"を知る！ Gemini CLIとClaude Codeを比較してみた！
Avatar for Kota Hisafuru kotahisafuru
3
920
Android 15以上でPDFのテキスト検索を爆速開発！
Avatar for tonionagauzzi tonionagauzzi
0
190
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
Avatar for hiyanger hiyanger
11
2.9k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
Avatar for yoshi takumiyoshikawa
2
260
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
Avatar for SEGADevTech segadevtech
2
750

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
It's Worth the Effort
Avatar for 3n 3n
185
28k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Navigating Team Friction
Avatar for Lara Hogan lara
188
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.5k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
19k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
58
9.5k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Visualization
Avatar for Eitan Lees eitanlees
146
16k

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