Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Testes Unitários em React
Search
Jonathan Cruz Rocha Ferreira
June 07, 2019
Technology
71
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Testes Unitários em React
Jonathan Cruz Rocha Ferreira
June 07, 2019
More Decks by Jonathan Cruz Rocha Ferreira
See All by Jonathan Cruz Rocha Ferreira
Automatizando Release
joohncruz
0
16
Design System com StencilJs - 17 de fev. de 2020
joohncruz
0
22
Introducao React Apps
joohncruz
0
16
Engatinhando_com_Redux_Saga.pdf
joohncruz
0
27
Arquitetura React Projeto Base
joohncruz
0
63
Apresentando o VueJs
joohncruz
0
18
Ecossistema de Testes com JavaScript
joohncruz
0
76
Testes Unitários em App React
joohncruz
0
26
Other Decks in Technology
See All in Technology
WasmをRustにする
sansantech
PRO
0
250
Rustuna: Rustによる高速なOptuna実装
pfn
PRO
0
190
パスキーの自動テストはどこまでいけるのか
teamlab
PRO
0
200
hackers_champloo_2026_tidb
makocchi
0
160
Code for Security プロジェクト紹介 2026年10月
yu23ki14
0
110
TinyGoでオブザーバビリティ?OpenTelemetryはTinyGoで使えるのか / Is OpenTelemetry available in TinyGo environment?
ymotongpoo
2
140
コンテナ運用におけるネットワーク・コンテナコストの削減方法/How to Reduce Network and Container Costs in Container Operations
masakiokuda
1
150
Claude の新機能を、 出た日に触って社内に届けるまで
rfdnxbro
1
170
Rust で関数型ドメインモデリング
takonda
0
140
"優秀な誰か"の下位互換にならないために
yut0naga1_fa
1
1.8k
Conditional PED-ANOVA: Hyperparameter Importance in Hierarchical & Dynamic Search Spaces
pfn
PRO
0
130
Claude Code本は、どのように執筆チームで書かれたか
oikon48
1
380
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2.1k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
2
330
Embracing the Ebb and Flow
colly
88
5.2k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
460
Information Architects: The Missing Link in Design Systems
soysaucechin
1
1.2k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
800
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2.2k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2.7k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
570
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
2
6.3k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.5k
What's in a price? How to price your products and services
michaelherold
247
13k
Transcript
Testes Unitários em React Jonathan Cruz (Shun) Github/Twitter joohncruz
“Por que não devemos testar nossa aplicação?”
CONCEITOS
Testes Automatizados
Testes Unitários
React • Biblioteca para criar interfaces • Componentes • Virtual-DOM
• JSX FACEBOOK
Componentes Presentational e Container Stateless e Stateful
Ferramentas? JEST MOXIOS SINON JASMINE ENZYME CHAI MOCHA QUNIT KARMA
JEST? • Zero configurações • Completo para testar soluções JavaScript.
• Feedback instantâneo • Reporte de Cobertura • Mocks • Snapshots FACEBOOK
None
ESCOPO
CICLOS
COVERAGE
COVERAGE Setup
EXPECT .toBeNull() .toBeTruthy() .toBeUndefined() .toContain(item) .toEqual(value) .toHaveLength(int)
ENZYME? AIRBNB É uma lib de teste em JS para
React que tornar mais fácil lidar com asserts, manipulações e output de componentes.
API Reference first() render() mount() equals() find() instance() setState() simulate()
text() html()
Montando componente React com o Enzyme
Shallow • Não renderiza o Children • Isolado
Render • Sem lifecycles • Render children • Less APIs
(setState, debug...)
Mount • Lifecycle methods (componentDidMount) • Render children
Como consigo testar métodos dentro de um Componente?!
.instance() • Obtém a instância do componente sendo renderizado; •
Retorna null em componentes stateless;
SNAPSHOT Jest + Enzyme E uma maneira de armazenar o
resultado do seu componente em pleno texto.
SNAPSHOT Mas não era para conseguir ver a diferença na
marcação do componente na hora da modificação?
SNAPSHOT Agora sim… enzyme-to-json
Como testar componentes que encapsulados? Redux Com dependência por componentização
Componente com Redux :(
Componente com Redux :) Unitário!
Mas o que deve ser testado? Meus componentes são simples...
Não devemos pensar apenas os métodos! • O componente está
sendo renderizado corretamente? • As ações dos usuário estão sendo realizadas? • As propriedades passadas são coerentes e estão onde deveriam estar?