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
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
20
Arquitetura React Projeto Base
joohncruz
0
56
Apresentando o VueJs
joohncruz
0
13
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
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
sansantech
PRO
2
340
レガシー共有バッチ基盤への挑戦 - SREドリブンなリアーキテクチャリングの取り組み
tatsukoni
0
210
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
aeonpeople
6
2.2k
月間数億レコードのアクセスログ基盤を無停止・低コストでAWS移行せよ!アプリケーションエンジニアのSREチャレンジ💪
miyamu
0
850
What happened to RubyGems and what can we learn?
mikemcquaid
0
250
AI駆動開発を事業のコアに置く
tasukuonizawa
1
120
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
kekke_n
1
380
AIエージェントを開発しよう!-AgentCore活用の勘所-
yukiogawa
0
120
Introduction to Bill One Development Engineer
sansan33
PRO
0
360
Context Engineeringの取り組み
nutslove
0
320
Agile Leadership Summit Keynote 2026
m_seki
1
570
2人で作ったAIダッシュボードが、開発組織の次の一手を照らした話― Cursor × SpecKit × 可視化の実践 ― Qiita AI Summit
noalisaai
1
380
Featured
See All Featured
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
49
First, design no harm
axbom
PRO
2
1.1k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
96
Build The Right Thing And Hit Your Dates
maggiecrowley
38
3k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
200
Tell your own story through comics
letsgokoyo
1
810
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.2k
The Curse of the Amulet
leimatthew05
1
8.4k
Embracing the Ebb and Flow
colly
88
5k
A better future with KSS
kneath
240
18k
GraphQLの誤解/rethinking-graphql
sonatard
74
11k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
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?