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
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
rvirus0817
1
1.3k
Agile Leadership Summit Keynote 2026
m_seki
1
570
Embedded SREの終わりを設計する 「なんとなく」から計画的な自立支援へ
sansantech
PRO
3
2.3k
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
nihonbuson
PRO
2
230
生成AI時代にこそ求められるSRE / SRE for Gen AI era
ymotongpoo
5
3k
Bedrock PolicyでAmazon Bedrock Guardrails利用を強制してみた
yuu551
0
190
Digitization部 紹介資料
sansan33
PRO
1
6.8k
Oracle Cloud Observability and Management Platform - OCI 運用監視サービス概要 -
oracle4engineer
PRO
2
14k
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
bwkw
3
920
配列に見る bash と zsh の違い
kazzpapa3
1
130
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
riku_423
2
530
GitLab Duo Agent Platform × AGENTS.md で実現するSpec-Driven Development / GitLab Duo Agent Platform × AGENTS.md
n11sh1
0
130
Featured
See All Featured
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
64
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Mind Mapping
helmedeiros
PRO
0
79
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
1
1.4k
Site-Speed That Sticks
csswizardry
13
1.1k
Accessibility Awareness
sabderemane
0
51
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
330
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
64
Building a Scalable Design System with Sketch
lauravandoore
463
34k
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?