Ferramentas de Teste e Depuração JavaScript

Pense duas vezes, corte uma vez.

Um paradigma que tem guiado engenheiros de software e desenvolvedores ao longo dos anos. Planejar e pensar nas coisas antes de começar a codificar ajuda a tornar o desenvolvimento muito mais fácil e ajuda a desenvolver softwares mais precisos no final do processo de construção.

No entanto, nem tudo é tratado, pois alguns bugs ainda passam pelo firewall. Conseguir corrigir os erros após o desenvolvimento é muito mais difícil, por isso decidi escrever um artigo para resolver esse problema.

Existem muitas ferramentas para ajudar a facilitar o desenvolvimento, aumentar a produtividade e aumentar a robustez do nosso software. Mas vamos dar uma olhada em algumas ferramentas de teste e depuração. Cada um deles é muito poderoso em seus direitos quando usado em seus pontos fortes.

As ferramentas incluem:

  • Brincadeira
  • Mocha
  • Cypress.io
  • Ferramentas do Chrome Dev
  • Redux Dev Tools

Vamos dar uma olhada nessas lindas ferramentas de teste e depuração.

Brincadeira

Versão 22.4.1 / 16 883 GitHub ? / 2 Dependências

Jest é uma ferramenta de teste popular mantida pelo Facebook e usada majoritariamente nos testes de aplicativos React.

É uma estrutura muito simples e fácil de usar, pois tudo o que faz para verificar e testar os arquivos necessários e exibe os resultados do teste.

Assim como quase tudo o que é tratado pelo Facebook, o Jest vem com vários recursos para tornar o teste mais fácil para todos os desenvolvedores.

O Jest suporta testes assíncronos, o que significa que mais pode ser feito em menos tempo, à medida que os testes são executados como processos paralelos.

Jest também permite a zombaria de objetos em arquivos de teste com funções como função e recursos de simulação de temporizador.

Você também pode executar testes de snapshot ao trabalhar com aplicativos Jest on React, para que você possa conhecer facilmente a alteração que causou uma falha.

Essas são algumas das características adoráveis ??deste quadro incrível. Outros incluem suporte à cobertura de código, capacidade de integração completa com outras bibliotecas, isolamento de testes e muito mais.

Jest é facilmente instalado e configurado graças à ferramenta npm:

Você pode instalar localmente usando:

npm install --save-dev jest

Você também pode instalar globalmente usando:

npm install -g jest

Para aprender mais sobre este framework mantido pelo Facebook, por favor, confira o repositório do github .

Mocha

Versão 5.1.0 / 15 138 GitHub ? / 11 Dependências

Aqui está outra estrutura popular para realizar testes de unidade e integração. O Mocha é um framework de teste dependente do Node.js com muitos recursos incríveis.

O Mocha é leve e também simples de usar.

Com recursos como suporte a navegador, suporte a cobertura de teste, teste assíncrono, suporte a tempo limite e muitos outros recursos. O Mocha se tornou a escolha de muitos desenvolvedores, considerando o fato de ser leve e não exigir insanidades nos recursos do computador.

Instalar o Mocha é bem simples com o npm.

Uma instalação local pode ser feita com:

npm install --save-dev mocha

Também pode ser feito globalmente com:

npm install --global mocha

Para saber mais sobre o Mocha, você pode visitar a página do Github .

Cypress.io

Versão 2.1.0 / 4 735 GitHub ? / 38 Dependências

Você é um desenvolvedor front-end ou tem alguém ao seu redor? Chame-os. O Cypress.io é uma ferramenta de teste de front-end open source muito poderosa que ajuda e melhora o processo de desenvolvimento web.

O Cypress.io é uma das ferramentas mais simples de usar que você jamais encontraria, tudo é muito fácil de fazer, incluindo a configuração de testes, a redação de testes, a execução de testes e a depuração de testes.

Com Cypress.io você pode escrever todos os tipos de testes de ponta a ponta para testes de integração para testes unitários, devido a essa funcionalidade, ganhou a comparação com os testadores Selenium by Quality Assurance. No entanto, os desenvolvedores que usaram ambos admitiriam que o Cypress.io é muito mais funcional.

O Cypress.io vem com recursos surpreendentes, como testes de snapshot que eles chamam de “Time Travel“, o recurso de espera automática, capacidade de controlar o comportamento das funções e respostas do servidor e se integra efetivamente com ferramentas de depuração como o Chrome DevTools. mais tarde neste artigo.

Você pode instalar o Cypress.io usando o comando npm também.

Uma instalação local pode ser feita com:

npm install cypress --save-dev

Cypress.io é muito fácil de usar e devidamente documentado também. Para saber mais sobre esse maravilhoso framework, confira sua documentação .

DevTools do Chrome

Versão 1.0.548690 / 693 GitHub ? / 0 Dependências

O Google está disposto a facilitar a vida dos desenvolvedores de software, e isso está claro para todo mundo ver.

Os DevTools do Google Chrome são um conjunto de ferramentas de depuração, autoria da Web e ferramentas de criação de perfis que podem ser usadas para depurar códigos JavaScript diretamente do navegador Google Chrome à medida que são incorporados. Você pode interagir com HTML, CSS e JavaScript a partir do navegador simplesmente clicando no botão inspecionar elemento.

Os DevTools do Chrome vêm com painéis diferentes:

  • O painel de cronograma para melhorar o desempenho de renderização de páginas da Web.
  • O painel de perfis para melhor desempenho de JavaScript e CSS.
  • O painel de recursos para inspecionar o armazenamento de páginas da Web, como o banco de dados HTML5, cookies, armazenamento local etc.

Além disso, os DevTools vêm com habilidades para alternar arquivos rapidamente, pesquisar dentro do código-fonte, selecionar elementos JavaScript no código, alterar o modo do dispositivo (para verificar como uma página seria em dispositivos móveis sem precisar trocar de dispositivos) escolha cores para obter seus códigos hexadecimais e muito mais.

Você pode estar usando o Google Chrome durante todos esses anos sem saber que tem uma ferramenta de depuração com muito poder.

Há muitos tutoriais sobre como aproveitar melhor o Chrome DevTools na internet, já que você pode fazer muito com essa ferramenta para aumentar a produtividade.

Redux DevTools

Versão 3.4.1 / 39 897 GitHub ? / 3 Dependências

Aqui está outra ferramenta tão poderosa quanto as DevTools do Chrome, no entanto, isso é usado para depurar somente aplicativos Redux.

O Redux DevTools é ótimo para depurar código em seu estado de aplicação, é muito fácil de usar e instalar com interface de usuário muito bonita que pode ser personalizada ao seu gosto.

Ele vem com recursos como o que permite inspecionar cada carga útil, fazer snapshot de versões do seu código, o que significa que você pode restaurar versões anteriores do código, e também pode persistir sessões de depuração quando uma página da web é recarregada.

Você pode integrar o Redux DevTools em seu projeto simplesmente clonando o projeto:

git clone https://github.com/gaearon/redux-devtools.git cd 
 redux-devtools

Então você pode executar o seguinte na pasta raiz:

npm install

Você pode finalmente prosseguir para a pasta do seu aplicativo e depois executar o comando npm install novamente.

Então você pode executar o servidor de desenvolvimento:

npm start 
 open http://localhost:3000

Se você não quiser passar pelos “problemas” da instalação da ferramenta, poderá usar a extensão do navegador facilmente.

Você pode conferir a página do github para mais informações sobre esta ferramenta, também existe uma extensão para uso em navegadores .

CONCLUSÃO

Todas as ferramentas de teste e depuração de JavaScript discutidas neste artigo têm seu ponto mais forte e mais fraco.

Na medida em que as ferramentas de teste podem ser usadas para testar qualquer tipo de código JavaScript, temos que tomar as seguintes notas:

  • Jest é o melhor para testar aplicativos React.
  • O Mocha é melhor para testar aplicativos do Node.
  • Cypress é melhor para testar o código front-end.

Por outro lado, discutimos uma ferramenta geral de depuração e, em seguida, uma ferramenta especializada.

Embora o Google Chrome DevTools seja excelente para depurar código front-end e possa ser facilmente integrado a ferramentas de teste como o Cypress, o Redux DevTools é usado especificamente para depurar aplicativos do Redux e também tem uma extensão de navegador e pode ser usado em navegadores como o Chrome e o Mozilla Firefox.

Escrito por Anton Shaleynikov

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *