Moldando a pirâmide de testes da sua aplicação React

Testar é provavelmente uma das etapas mais importantes do desenvolvimento de software. Por quê? Porque garante a qualidade do produto. Existem muitas maneiras de testar um produto, desde o teste end-to-end até o teste de unidade. Vamos falar sobre como testar seu código React usando Jest, Enzyme e outras ferramentas e moldar a pirâmide de testes da sua aplicação.

Transcript

1. Moldando a pirâmide de testes da sua aplicação React
2. Quem sou eu? Inajara Leppa Desenvolvedora na Creditas há 6 meses Defensora dos testes automatizados
3. Por que testar?
4. Garantir a qualidade da solução desenvolvida e reduzir riscos que podem impactar as usuárias finais da aplicação, além de servir como documentação da aplicação. “Melhor um bug na mão da desenvolvedora que na mão da usuária”
5. Testar ao longo do desenvolvimento ao invés de testar apenas no final Prevenir bugs ao invés de encontrar bugs Testar o entendimento ao invés de checar funcionalidades Construir o melhor sistema ao invés de quebrar o sistema O time é responsável pela qualidade ao invés de as testers são responsáveis pela qualidade
6. Por que automatizar?
7. Automação de testes é o uso de ferramentas para controlar a execução dos testes. Os objetivos da automação de testes é tornar a prevenção a erros mais rápida e assertiva e também economia de tempo na execução de tarefas repetitivas. Os testes automatizados servem como forma de documentar a aplicação e assim facilitar o entendimento do código e entrada de novas pessoas. “Descobrir o inesperado é mais importante do que confirmar o conhecido.“ - George E. P. Box
8. Pirâmide de testes
10. É o tipo de teste responsáveis por validar comportamentos individuais da menor partes testável de um software (ex: função, lógica de negócio). O objetivo do teste unitário é cobrir os diferentes cenários de retorno para um determinado trecho de código, incluindo falhas, casos extremos, etc.
11. Testes unitários devem ser orientados à comportamento. Isso garante que ao haver refatoração os testes não quebrem. Uma característica desse tipo de teste é ser isolado de qualquer dependência externa como banco de dados ou serviços externos e algumas vezes isolados de outras lógicas internas da aplicação, utilizando dados fakes quando necessário.
12. O teste de integração é o processo de verificar se os componentes de um software, juntos, possuem o comportamento esperado. Os testes de integração possuem isolamento com dependências de serviços externos, utilizando dados fake quando necessário testar a interface com esses serviços.
13. Testes de integração são mais utilizados para testar o comportamentos de uma funcionalidade, diferente dos testes unitários que focam mais em funções/lógicas específicas e dos testes de ponta a ponta que testam o sistema como um todo. São conhecidos também como testes de componentes ou de serviços.
14. Teste de ponta a ponta refere-se a um tipo de teste de software que envolve testar o fluxo de uma aplicação do início ao fim. O objetivo é replicar cenários reais de usuários para que o sistema possa ser validado quanto à integração e integridade dos dados. Testes unitários Testes de interface
15. Diferente dos testes unitários e de integração, os testes de ponta a ponta na maioria se comunica com as dependências externas, para conseguir garantir que o fluxo todo está funcionando. São os testes que levam mais tempo, tanto para escrever quanto para executar e por isso geralmente cobrem mais os casos de caminho feliz dos fluxos. São conhecidos também como testes funcionais, de aceitação ou de fluxo
16. Ferramentas
17. Testes unitários e integração
18. • É uma biblioteca de teste de unidade JavaScript, usada pelo Facebook para testar serviços e aplicativos React. • Atua como um executor de teste, biblioteca de asserção e biblioteca de mocking. • Funciona com outros frameworks Javascript.
19. • É um utilitário de teste de JavaScript para React que torna mais fácil realizar asserções, manipular e testar a saída de seus componentes. • Funciona apenas com React. • Possui suporte a react hooks com algumas limitações.
20. Shallow: Renderiza apenas o componente que está sendo testado, ou seja, os filhos não são renderizados. Mount: Renderização total do componente com execução dos ciclos de vida do componente. Render: Renderização total do componente sem a execução dos ciclos de vida do componente. import { shallow, render, mount } from ‘enzyme';
22. Testes de componente
26. Teste com integração
30. 30 inajara.leppa@creditas.com.br twitter: @inajara_ https://www.linkedin.com/in/inajara-leppa/