React e Teste Unitário - Como Lidar?

Transcript

1. React e Teste Unitário Como lidar?
2. QUEM SOMOS EDLAINE ZAMORA Desenvolvedora Belo Horizonte THAÍS FREITAS Analista de Qualidade Recife - SP
3. • Recursos de React • Recursos de React Testing Library • Entender diferentes tipos de testes O FOCO DESSA TALK NÃO É
4. Teste Unitário 01 Boas Práticas de Teste Unitário 02 React Library 03 Teste Unitário com React Testing Library 04 05 Demonstração AGENDA
5. TESTE UNITÁRIO 01
6. Testa automaticamente o comportamento de uma menor unidade testável possível. • Menor custo de execução • Menor esforço de criação • Feedback mais rápido • Maior segurança para refatorar seu código • Serve como documentação do código TESTE UNITÁRIO
7. BOAS PRÁTICAS DE TESTE UNITÁRIO 02
8. • Teste unitário também é código, então, é preciso: ◦ Escrever teste legível ◦ Escrever teste desacoplado • Focar no comportamento e não testar detalhes de implementação • Se necessário mockar dependências externas a sua unidade BOAS PRÁTICAS DE TESTE UNITÁRIO
9. REACT LIBRARY 03
11. REACTJS • É uma lib do JavaScript (mais famosa ) • É usada para construir interfaces de usuário (UI) • Manipulação do DOM (Document Object Model) • É usado para construir SPA (Single Page Application) • Permite criar componentes de UI reutilizáveis
12. COMPONENTS: O QUE SÃO? ONDE VIVEM? • Código independente e reutilizável
14. TESTE UNITÁRIO 04 COM REACT TESTING LIBRARY
15. Solução simples para testar componentes em React que encoraja melhores práticas de teste e provê uma API simples para escrever os testes. react-testing-library
16. Testar comportamento de componentes assim como o usuário os usa. Funcionalidade de Logar • Escreva o nome no campo chamado usuário • Escreva a senha no campo senha • Clique no botão logar A IDEIA PRINCIPAL DA BIBLIOTECA
17. O que incluir no teste • Renderizar o componente com as propriedades desejadas • Interagir com o componente renderizado (como o usuário final faria) • Verificar o resultado da interação O que não incluir no teste • Detalhes de implementação (o usuário não vê) COMO LIDAR COM O TESTE?
18. DEMONSTRAÇÃO 05
19. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepik and illustrations by Stories OBRIADA! Perguntas? thoughtworks.com