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
日本の85%が使う公共SaaSは、どう育ったのか
taketakekaho
1
150
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
maaaato
0
130
茨城の思い出を振り返る ~CDKのセキュリティを添えて~ / 20260201 Mitsutoshi Matsuo
shift_evolve
PRO
1
250
ZOZOにおけるAI活用の現在 ~開発組織全体での取り組みと試行錯誤~
zozotech
PRO
5
5.2k
生成AI時代にこそ求められるSRE / SRE for Gen AI era
ymotongpoo
5
3.1k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
15
400k
Bedrock PolicyでAmazon Bedrock Guardrails利用を強制してみた
yuu551
0
210
外部キー制約の知っておいて欲しいこと - RDBMSを正しく使うために必要なこと / FOREIGN KEY Night
soudai
PRO
12
5.4k
OpenShiftでllm-dを動かそう!
jpishikawa
0
100
プロポーザルに込める段取り八分
shoheimitani
1
220
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
sansantech
PRO
3
1.4k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.3k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
74
11k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
0
250
The Art of Programming - Codeland 2020
erikaheidi
57
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
Side Projects
sachag
455
43k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.4k
Ruling the World: When Life Gets Gamed
codingconduct
0
140
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
200
SEO for Brand Visibility & Recognition
aleyda
0
4.2k
Bash Introduction
62gerente
615
210k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
190
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?