Testes Unitários em App React

22 de jan. de 2019

Transcript

1. Testes Unitários em React Jonathan Cruz (Shun) Github/Twitter joohncruz
2. “Por que não devemos testar nossa aplicação?”
3. CONCEITOS
4. Testes Automatizados
5. Testes Unitários
6. React • Biblioteca para criar interfaces • Componentes • Virtual-DOM • JSX FACEBOOK
7. Componentes Presentational e Container Stateless e Stateful
8. Ferramentas? JEST MOXIOS SINON JASMINE ENZYME CHAI MOCHA QUNIT KARMA
9. JEST? • Zero configurações • Completo para testar soluções JavaScript. • Feedback instantâneo • Reporte de Cobertura • Mocks • Snapshots FACEBOOK
11. ESCOPO
12. CICLOS
13. COVERAGE
14. COVERAGE Setup
15. EXPECT .toBeNull() .toBeTruthy() .toBeUndefined() .toContain(item) .toEqual(value) .toHaveLength(int)
16. ENZYME? AIRBNB É uma lib de teste em JS para React que tornar mais fácil lidar com asserts, manipulações e output de componentes.
17. API Reference first() render() mount() equals() find() instance() setState() simulate() text() html()
18. Montando componente React com o Enzyme
19. Shallow • Não renderiza o Children • Isolado
20. Render • Sem lifecycles • Render children • Less APIs (setState, debug...)
21. Mount • Lifecycle methods (componentDidMount) • Render children
22. Como consigo testar métodos dentro de um Componente?!
23. .instance() • Obtém a instância do componente sendo renderizado; • Retorna null em componentes stateless;
24. SNAPSHOT Jest + Enzyme E uma maneira de armazenar o resultado do seu componente em pleno texto.
25. SNAPSHOT Mas não era para conseguir ver a diferença na marcação do componente na hora da modificação?
26. SNAPSHOT Agora sim… enzyme-to-json
27. Como testar componentes que encapsulados? Redux Com dependência por componentização
28. Componente com Redux :(
29. Componente com Redux :) Unitário!
30. Mas o que deve ser testado? Meus componentes são simples...
31. 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?