Frontend

Ferramentas para testar o front-end

Para obter um desenvolvimento mais confiável em front-end, alinhado com as boas práticas atuais, devemos implementar diversos testes para ter garantia que as coisas irão funcionar conforme o esperado.

Na HypeFlame prezamos por fazer aplicações sofisticadas e altamente confiáveis. Para termos um alto grau de confiabilidade, utilizamos as ferramentas abaixo e testamos o nosso front em três frentes:

HypeFlame Talks #2 Arquitetura de testes no front-end foi sobre este assunto! Assista aqui:

1. Testes unitários e de integração de componentes

Image for post

React Testing Library

Para fazermos testes nas nossas aplicações feitas em React, utilizamos o React Testing Library, que é a biblioteca de testes mais utilizada e que tem diversos recursos para nos auxiliar nos testes.

E os testes de integração?

Nos testes de integração também utilizamos React Testing Library, temos esse tipo de teste quando testamos alguma página com diversos componentes ou quando testamos um fluxo inteiro dentro da nossa aplicação.

2. Mocks de requisições

Em diversas páginas ou componentes, precisamos fazer requests para renderizarmos os dados no front, nos testes isso não é diferente, pois precisamos testar como a UI se comporta com os dados.

Na grande maioria das aplicações front-end, utilizamos axios como http client, pela facilidade e por ter diversas ferramentas para auxiliar nos testes.

Ferramentas que utilizamos para interceptar as requests da UI e retornar os mocks nos nossos testes:

MSW

A MSW é uma lib que permite interceptar requests no nível de rede. Com a MSW é possível reutilizar a mesma definição de mock para teste, desenvolvimento e depuração.

axios-mock-adapter

O axios-mock-adapter é uma biblioteca que nos ajuda a criar mocks e integrar com eventos da nossa UI, no momento que estamos testando.

Moxios

Moxios também uma biblioteca com os mesmos objetivos da axios-mock-adapter.

3. Testes E2E

Para garantir que as nossas páginas estão renderizando no browser conforme esperamos, realizamos os testes E2E utilizando a seguinte ferramenta:

Image for post

Cypress

O cypress é um framework com diversos recursos que nos auxilia nos testes E2E.

Vantagens em testar o front-end e usar essas ferramentas

Com a implementação de testes no desenvolvimento do nosso front-end, temos menos bugs nas nossas UIs e consequentemente menos sustenção.

O uso dessas ferramentas nos ajuda na missão de testar, cada uma delas ajuda em um ponto específico do nosso teste.

React Testing Library combinada com alguma lib de mock nos permite fazer testes unitários e de integração que dão mais robustez e confiança no nosso desenvolvimento, diminuindo assim a incidência de bugs e retrabalhos após o desenvolvimento.

Implementar testes E2E com uma ferramenta tipo o Cypress, nos dá a vantagem de automatizar testes funcionais de UI, com isso temos uma diminuição em testes retroativos e uma garantia que a nossa UI está funcionando conforme o esperado

Conclusão

A utilização dessas ferramentas de testes nos abre diversas possibilidades, para testarmos de forma mais assertiva as nossas aplicações, usarmos metodologias de desenvolvimento como BDD e TDD, garantir que a UI desenvolvida está da forma como se espera e também de estarmos alinhados com as boas práticas e convenções de desenvolvimento atuais.

Integrando essas ferramentas nosso desenvolvimento e sistemas de deploys, ambos ficam mais robustos e confiáveis.

%d blogueiros gostam disto: