<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: João Victor</title>
    <description>The latest articles on DEV Community by João Victor (@joaovictor6).</description>
    <link>https://dev.to/joaovictor6</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F705470%2F3314ef52-c8d3-408f-8ce0-649b029d3897.png</url>
      <title>DEV Community: João Victor</title>
      <link>https://dev.to/joaovictor6</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/joaovictor6"/>
    <language>en</language>
    <item>
      <title>Melhorando seus testes com Jest</title>
      <dc:creator>João Victor</dc:creator>
      <pubDate>Mon, 10 Jan 2022 21:26:01 +0000</pubDate>
      <link>https://dev.to/joaovictor6/acelerando-seus-testes-em-jest-com-spyon-37ci</link>
      <guid>https://dev.to/joaovictor6/acelerando-seus-testes-em-jest-com-spyon-37ci</guid>
      <description>&lt;p&gt;Nesse artigo explicarei sobre como tornar nossos testes mais performaticos e sólidos.&lt;/p&gt;

&lt;h2&gt;
  
  
  Introdução
&lt;/h2&gt;

&lt;p&gt;Olá, me chamo João e me encontrei com um grande problema. Estava desenvolvendo um projeto no qual consumia uma API, para ser mais exato, está API era disponibilizada pela &lt;a href="https://rapidapi.com"&gt;rapidApi&lt;/a&gt;. Como sou um mero mortal(e estudante), estava utilizando do plano gratuito. Contudo, esse disponibiliza apenas 500 requests por mês. Sério, consegui estourar esse limite em um dia kkkkk.Seria impossivel desenvolver o app com tantas poucas requisições.&lt;br&gt;
Graças a esse "aperto", pensei em desenvolvelo utilizando de TDD(Test Driven Development), que é basicamente desenvolver guiados por teste. Nesse artigo irei mostrar o porquê. Espero que goste e que acima de tudo, te ajude!😁&lt;/p&gt;

&lt;h2&gt;
  
  
  Preparando o ambiente
&lt;/h2&gt;

&lt;p&gt;Para recriar o ambiente no qual estava, criarei uma API super simples com &lt;a href="https://expressjs.com/"&gt;Express&lt;/a&gt;, utilizarei do &lt;a href="https://www.npmjs.com/package/axios"&gt;Axios&lt;/a&gt; para fazer as requisições e claro, faremos os testes com o &lt;a href="https://jestjs.io/"&gt;Jest&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Expres, um pouco de arroz e feijão
&lt;/h3&gt;

&lt;p&gt;A api ficou bem simples. Basicamente criei uma rota que recebe um query e retorna um JSON. Além disso fiz uma função sleep para simular uma latência.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_-_mTe-D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pstyauyotol3r5xl7cr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_-_mTe-D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pstyauyotol3r5xl7cr.png" alt="API code" width="880" height="463"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Configurando app para consumir nossa API
&lt;/h3&gt;

&lt;p&gt;Aqui criaremos o projeto, nele utilizaremos além dos jest para testes, usaremos também o babel para termos uma sintaxe um pouco mais agradável.(Deixarei o repositório no final do artigo, não se preocupe!)&lt;br&gt;
A estrutura do projeto ficou assim:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0doWAXQh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyevu014qlnph7rfpnfo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0doWAXQh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyevu014qlnph7rfpnfo.png" alt="Project structure" width="262" height="285"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Pasta __teste__:&lt;/p&gt;

&lt;p&gt;Evidentemente, será nela onde ficara nossos testes.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Pasta utils:&lt;/p&gt;

&lt;p&gt;Nela ficara nossa instância no Axios, segue o código:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--eXXaJIeI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hfesdvgurejvg4dqu1y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--eXXaJIeI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hfesdvgurejvg4dqu1y.png" alt="Axios instance code" width="764" height="558"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Jest, e TDD
&lt;/h2&gt;

&lt;p&gt;Agora iremos produzir nosso teste para a função. Em TDD primeiro fazemos os testes e só depois a função.&lt;/p&gt;
&lt;h3&gt;
  
  
  Esqueleto da função
&lt;/h3&gt;

&lt;p&gt;Basicamente, iremos apenas declarar a função para podermos importa-la nos testes.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KTf0cV7x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5irdab34jbqm6t8164dt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KTf0cV7x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5irdab34jbqm6t8164dt.png" alt="Function base" width="880" height="453"&gt;&lt;/a&gt;&lt;br&gt;
Agora sim partiremos para os testes. Temos de pensar no que a função vai fazer. Nesse caso, ela deve receber um nome, e retornar um objeto tipo: &lt;code&gt;{ message: 'Olá, teste' }&lt;/code&gt;.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--aumR9rgC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42jzcczk9gzyjhsi52np.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--aumR9rgC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42jzcczk9gzyjhsi52np.png" alt="Basic test code" width="880" height="475"&gt;&lt;/a&gt;&lt;br&gt;
Esse é basicamente nosso teste. A primeiro momento ele irá falhar(ainda bem). A partir de agora temos que fazê-lo passar.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Para isso, implementei nossa função, ela ficou da seguinte forma:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--eFRKzFZl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfpp3bjiafxv63d3wydl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--eFRKzFZl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfpp3bjiafxv63d3wydl.png" alt="Function" width="880" height="440"&gt;&lt;/a&gt;&lt;br&gt;
O teste ainda não vai passar, já que como essa é uma função async e recebemos apenas uma promise.&lt;br&gt;
 &lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VEDUkg2f--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9eu4e6f3f2uzx4dptll.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VEDUkg2f--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9eu4e6f3f2uzx4dptll.png" alt="output test" width="247" height="134"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Aprovando o teste
&lt;/h3&gt;

&lt;p&gt;Agora, vamos tratar o retorno da função &lt;em&gt;sendHelloWorld&lt;/em&gt; lá nos nossos testes. Isso significa que temos apenas que botar um &lt;em&gt;async&lt;/em&gt; na função e utilizar um &lt;em&gt;await&lt;/em&gt; no retorno da função. Ficou assim:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DXNOS1be--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kt813nzti6aankaxqdx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DXNOS1be--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kt813nzti6aankaxqdx.png" alt="FUnctional test" width="880" height="426"&gt;&lt;/a&gt;&lt;br&gt;
 Pronto, nossa função passou! Porém, existe um pequeno problema. Com o tempo, nossos testes podem acabar crescendo em quantidade, além disso. Estamos dependendo de uma API externa para executarmos o código. Isso tornam eles menos confiáveis, além de que podem ser extremamente voláteis. imagina se a latência fique alta? Não seria mais inteligente interceptarmos a &lt;em&gt;request&lt;/em&gt; que fizemos ao servidor e retornar um valor pré determinado? um &lt;strong&gt;Mock&lt;/strong&gt;? Bom, eu acredito que sim.&lt;/p&gt;

&lt;h3&gt;
  
  
  Não dependa de API's nos testes.
&lt;/h3&gt;

&lt;p&gt;Estamos na parte final do nosso artigo. porém, a mais importante. Imagine um cenário no qual temos 10 testes onde cada um deles faz uma request para algum serviço externo ou API. Nossos testes estariam diretamente ligados a algo no qual não temos o minimo controle. Eles poderiam demorar 3s ou até mesmo 20s, tudo dependeria da latência. Para evitarmos tal problema, o Jest tem uma forma bem simples. Podemos reescrever certas funções, olha que interessante!(me pareceu magia quando descobri kkkk).&lt;/p&gt;

&lt;h3&gt;
  
  
  Reescrevendo métodos
&lt;/h3&gt;

&lt;p&gt;Bom, agora que ja entendemos oque fazer, temos que realmente fazer. Olha o quão simples é reescrever uma função no jest:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--j4MMSlLm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3k851f7253l17qhjml6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--j4MMSlLm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3k851f7253l17qhjml6.png" alt="Final test code" width="880" height="501"&gt;&lt;/a&gt;&lt;br&gt;
 Pronto, agora temos um teste totalmente isolado, isso é incrivel!!&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusões
&lt;/h2&gt;

&lt;p&gt;Espero que tenha aprendido um pouco mais sobre TDD e entendido o quanto foi util pra mim essa alternativa. Além disso, irei passar aqui alguns links que me ajudaram a escrever o artigo e descobrir essa solução:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://jestjs.io/docs/jest-object#jestfnimplementation"&gt;Jest.fn&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=bLdEypr2e-8"&gt;TDD (Test Driven Development) // Dicionário do Programador&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Repositório com o exemplo
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/JoaoVictor6/jest-example"&gt;Github&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>tdd</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
