{"componentChunkName":"component---src-templates-blog-post-js","path":"/como-criar-testes-no-front-end-em-reactjs/","result":{"data":{"markdownRemark":{"fields":{"slug":"/como-criar-testes-no-front-end-em-reactjs/"},"frontmatter":{"titulo":"Como criar testes no front-end em ReactJs","data":"22/05/2020","tag":"ReactJs","image":{"childImageSharp":{"fluid":{"src":"/static/b8184c6a662b1566221a0b0526539790/7a3c2/capa.png","base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAACpUlEQVQoz1VSS09TURDuDyACIkJvuX3e3j5peRakoshDHqWFSlsofdAWCrRAG0BQCIlBRBI0JrpRYqJiYkzcudOdezf+GHfG+znn2FtxMXfOuTPznW++GY3F3vFTsneCTLHYOqA3t0Ir2skc0OodaDG6YJS8EAxO/k9HnudQjN1FU2u1luy3RgUzWDzouzGG4sYOMotrWC5sch+ZzSCdLSCX38Dicgm5pXUMj4axkCsiv1rmOSZrG8dgWBpiyA/0U2lt9yMcSfGiRHoZWfLB6Ti6egcRCM0inlzCRDCG2xMzSGVWec70TJLXqsQ4Q0aXebPcDh21yNppFKyIzGVwb/8QK8Q2my8R+7sobe7B7u5Bk84GQe/kkqgYzNSWq6BWRxdkZzc/X785hulwHOFYGpOjUwhH00gQS7e3j8dZHstXa3nLVTAbgVUC/E6JBpMb9YE0LsVLaBiJ4XKsiLpoQdWsyuoiKQ37WJmGdpqwg9pWE1gRMRAWtmAYiaLm/TeIkyloc7uwuHwU98KiAtn/AWsYmI7WIBWax9FCCUO3AtDTxBlYSyCBuuM3qH36EY3rD1F3co7a0w/QzeQJtAeVYUKSLjBkB29nPx4Ud/H9+TmGh0IQRRuMg2E0p7cgRFdwZfsUNa+/oGH/BbSJErTxdYjBNMyCDNnVi4O3Z7iTyPMd1cgun3JY3sfZzpHy49k7RIJzEGhyMmnYMjGP+kcVhuXj/xiaiIi7zY/c58fIfzpRPN5+tiW0Nm4fnqzuKq+y2ygEk+jqHoCR2rDSCjGNtMkyDANTxPArxPE4mklTiTQ0iE74Q1NIvjygx30wmj2KRDPQEOovt+ca3O1+RZA8HOyv0J1ceGFuDVdJP3F8Hk1Le2havA+p8phF7oDZ0MaZMTDSUPkDFoqem+3sB4wAAAAASUVORK5CYII=","aspectRatio":1.7045454545454546,"srcSet":"/static/b8184c6a662b1566221a0b0526539790/7e7e9/capa.png 225w,\n/static/b8184c6a662b1566221a0b0526539790/62b1f/capa.png 450w,\n/static/b8184c6a662b1566221a0b0526539790/7a3c2/capa.png 733w","sizes":"(max-width: 733px) 100vw, 733px"}}}},"html":"

Vamos aprender a testar ouvindo Passionfruit do Drake.

\n

Todo o Dev independente do seu cargo, tem que ter ciência da importância de testes de unidade em seu código. A propósito e esse assunto que irei abordar hoje! Especificamente no mundo front-end em ReactJs.

\n

Mas Lorena, como assim testar front-end??? Ele e realmente necessário??

\n

\"really

\n

A realidade é que é um assunto meio dark de se dizer inclusive agora com essa nova geração do javascript, antigamente haviam poucas maneiras de testar a parte visual da aplicação. É muito importante testar, principalmente, bibliotecas de componentes, integração com biblioteca de terceiros e claro o mais importante de tudo, evitar bugs a longo prazo.

\n

\"Entendi

\n

A melhor parte é que com a evolução das tecnologias temos várias maneiras de fazer testes e manter a qualidade de seus projetos.

\n

Hoje vou falar com um pouco dessas tecnologias e criar um projeto básico de login e listagem de produtos.

\n

Tecnologias que vamos utilizar

\n
    \n
  1. \n

    Create react app (CRA)

    \n

    Para criação de aplicação ReactJs

    \n
    2. \n
  2. \n

    Jest

    \n

    Biblioteca padrão do CRA. Criado pelo facebook. Ele nos permite testar snapshots de uma forma muuuito rápida, mensagens de erros claras, configuração simples entre outros..

    \n
    3. \n
  3. \n

    Enzyme

    \n

    Permite ao desenvolvedor simplificar a renderização de componentes nos testes. Uma api semelhante a do Jquery para buscar elementos

    \n
    4. \n
  4. \n

    Enzyme-to-json

    \n
    \n

    Converta wrappers de enzima em um formato compatível com o teste de captura instantânea Jest

    \n
    \n
    5. \n
\n

Criando o projeto!

\n

A propósito você consegue ver o projeto completo clicando aqui.

\n

npm install -g create-react-app create-react-app react-login-testing cd react-testing npm install -S prop-types

\n

Vamos preparar o ambiente de testes!

\n

npm i --save-dev enzyme enzyme-adapter-react-16 enzyme-to-json

\n

Para ver se esta tudo funcionando :

\n

npm test

\n

Você deve ter um resposta conforme imagem abaixo:

\n

\n \n \n

\n

Por fim...

\n

Testes garantem que podemos evoluir nosso software com qualidade. Não há razão para não começar a testar hoje. Ambas tecnologias tem uma documentação exelente.

\n

Boa sorte nos seus testes,

\n

Até mais,

\n

\"bye\"

","timeToRead":6}},"pageContext":{"slug":"/como-criar-testes-no-front-end-em-reactjs/","previousPost":{"fields":{"slug":"/como-configurar-dominio-no-netlify-e-godaddy/"},"frontmatter":{"templateKey":"blog-post","data":"28 de Maio de 2020","tag":"assuntos aleatórios","titulo":"Como configurar domínio no netlify e godaddy","locale":"pt"},"timeToRead":2},"nextPost":{"fields":{"slug":"/4-mulheres-incriveis-que-fizeram-historia-com-ti/"},"frontmatter":{"templateKey":"blog-post","data":"11 de Maio de 2020","tag":"Programação","titulo":"4 Mulheres Incríveis que fizeram história com TI","locale":"pt"},"timeToRead":2},"locale":"pt"}}}