Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Testes Unitários em React
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Jonathan Cruz Rocha Ferreira
June 07, 2019
Technology
0
60
Testes Unitários em React
Jonathan Cruz Rocha Ferreira
June 07, 2019
Tweet
Share
More Decks by Jonathan Cruz Rocha Ferreira
See All by Jonathan Cruz Rocha Ferreira
Automatizando Release
joohncruz
0
11
Design System com StencilJs - 17 de fev. de 2020
joohncruz
0
14
Introducao React Apps
joohncruz
0
10
Engatinhando_com_Redux_Saga.pdf
joohncruz
0
21
Arquitetura React Projeto Base
joohncruz
0
56
Apresentando o VueJs
joohncruz
0
14
Ecossistema de Testes com JavaScript
joohncruz
0
71
Testes Unitários em App React
joohncruz
0
18
Other Decks in Technology
See All in Technology
AIエージェントを開発しよう!-AgentCore活用の勘所-
yukiogawa
0
150
Introduction to Bill One Development Engineer
sansan33
PRO
0
360
MCPでつなぐElasticsearchとLLM - 深夜の障害対応を楽にしたい / Bridging Elasticsearch and LLMs with MCP
sashimimochi
0
160
予期せぬコストの急増を障害のように扱う――「コスト版ポストモーテム」の導入とその後の改善
muziyoshiz
1
1.8k
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
miu_crescent
PRO
2
190
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
rocketmartue
1
300
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
kworkdev
PRO
1
430
AWS Network Firewall Proxyを触ってみた
nagisa53
1
220
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
torounit
0
180
15 years with Rails and DDD (AI Edition)
andrzejkrzywda
0
190
30万人の同時アクセスに耐えたい!新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
genda
4
1.2k
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
khmoryz
0
180
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
6.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
71k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
150
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
170
Navigating Team Friction
lara
192
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
Rebuilding a faster, lazier Slack
samanthasiow
85
9.4k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Rails Girls Zürich Keynote
gr2m
96
14k
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?