<?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: Yuri Burk</title>
    <description>The latest articles on DEV Community by Yuri Burk (@yuriburk).</description>
    <link>https://dev.to/yuriburk</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%2F392261%2F10b6c79d-a97b-4c5a-b94b-c0a93c83bff2.png</url>
      <title>DEV Community: Yuri Burk</title>
      <link>https://dev.to/yuriburk</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/yuriburk"/>
    <language>en</language>
    <item>
      <title>Criando testes unitários com Jest em uma aplicação Node.js</title>
      <dc:creator>Yuri Burk</dc:creator>
      <pubDate>Thu, 21 May 2020 19:45:56 +0000</pubDate>
      <link>https://dev.to/yuriburk/criando-testes-unitarios-com-jest-em-uma-aplicacao-node-js-31dk</link>
      <guid>https://dev.to/yuriburk/criando-testes-unitarios-com-jest-em-uma-aplicacao-node-js-31dk</guid>
      <description>&lt;p&gt;Imagine um cenário onde temos diversos desenvolvedores, trabalhando em diferentes funcionalidades que utilizam classes compartilhadas. Muito provavelmente quando realizarem o merge alguns conflitos acontecerão, tendo que serem resolvidos manualmente. Agora vamos pensar em um método que teve que ser alterado para atender outro critério de aceite, como garantir que não teremos problemas na outra parte do nosso sistema?&lt;/p&gt;



&lt;p&gt;Para isso, os &lt;strong&gt;testes automatizados&lt;/strong&gt; garantem que a nossa aplicação continue funcionando independente do número de novas funcionalidades ou de desenvolvedores no time.&lt;/p&gt;



&lt;p&gt;Temos alguns tipos de testes automatizados:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;
&lt;strong&gt;Testes unitários&lt;/strong&gt;: Funções puras que testam funcionalidades específicas da nossa aplicação.&lt;/li&gt;
  &lt;li&gt;
&lt;strong&gt;Testes de integração&lt;/strong&gt;: Testam uma funcionalidade completa, passando por várias camadas da aplicação.&lt;/li&gt;
  &lt;li&gt;
&lt;strong&gt;Testes E2E&lt;/strong&gt;: Simulam a ação do usuário dentro da aplicação.&lt;/li&gt;
&lt;/ol&gt;



&lt;p&gt;Neste post, irei mostrar como criar testes unitários no Javascript utilizando o Jest.&lt;/p&gt;

&lt;h2&gt;📘 O que é o Jest?&lt;/h2&gt;

&lt;p&gt;Jest é um framework simples para criar testes automatizados no Javascript, podendo ser utilizado em aplicações Node.js, React, Angular, Vue e mais. Fornece um dashboard de cobertura de código e um modo fácil de criar testes com mocks (objetos falsos que simulam comportamentos de outro objeto).&lt;/p&gt;

&lt;h2&gt;👨‍💻 Indo para o código!&lt;/h2&gt;

&lt;p&gt;Primeiro, vamos criar uma aplicação Node.js executando o seguinte comando:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="go"&gt;yarn init -y
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;





&lt;p&gt;Agora vamos instalar o Express:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="go"&gt;yarn add express
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;





&lt;p&gt;Com isso, podemos criar nosso servidor básico em um novo arquivo &lt;code&gt;app.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;calculator&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./src/Calculator&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Hello World! The sum of 2 + 2 is: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;calculator&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;🚀 Servidor rodando na porta 5000&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;





&lt;p&gt;Como você deve ter percebido nas importações, foi criado um objeto chamado &lt;code&gt;calculator&lt;/code&gt;, para isso basta criar o arquivo &lt;code&gt;src/Calculator/index.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;calculator&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;numberLeft&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;numberRight&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;numberLeft&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;numberRight&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;calculator&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;





&lt;p&gt;Se tudo tiver dado certo, você pode executar &lt;code&gt;node app.js&lt;/code&gt; que deve nos retornar no log: &lt;code&gt;🚀 Servidor rodando na porta 5000&lt;/code&gt;.&lt;/p&gt;



&lt;p&gt;Agora vamos adicionar o Jest rodando &lt;code&gt;yarn add jest -D&lt;/code&gt;, e criar o nosso arquivo de testes &lt;code&gt;index.test.js&lt;/code&gt; na mesma pasta da nossa calculadora:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;calculator&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./index&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Calculator sum should be ok&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;calculator&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nx"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;





&lt;p&gt;O método &lt;code&gt;test&lt;/code&gt; recebe a descrição do que vai ser testado e também uma função, que executa o nosso cenário de teste. Dentro do &lt;code&gt;expect&lt;/code&gt; eu passo primeiro a nossa ação, e logo depois eu chamo o &lt;code&gt;toBe&lt;/code&gt; que recebe qual é o resultado esperado daquela ação. Se formos ler o código podemos notar que é altamente fluente: "&lt;strong&gt;O teste A soma da calculadora deve estar ok espera que a soma da calculadora 2 + 2 deve ser 4&lt;/strong&gt;".&lt;/p&gt;



&lt;p&gt;Agora basta rodar &lt;code&gt;yarn jest&lt;/code&gt; que exibirá o seguinte no terminal:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="go"&gt; PASS  src/Calculator/index.test.js
  √ Calculator sum should be ok (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.503 s
Ran all test suites.
Done in 2.38s.
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;





&lt;p&gt;Futuramente iremos colocar Typescript no nosso projeto e começar a desenvolver testes mais complexos. Mas com isso você já aprendeu o básico, de modo muito simples, para começar a desenvolver testes unitários assertivos em sua aplicação.&lt;/p&gt;

&lt;p&gt;Post original:&lt;br&gt;
&lt;a href="https://burk.dev/criando-testes-unitarios-com-jest-em-uma-aplicacao-node-js"&gt;https://burk.dev/criando-testes-unitarios-com-jest-em-uma-aplicacao-node-js&lt;/a&gt;&lt;/p&gt;

</description>
      <category>jest</category>
      <category>node</category>
    </item>
  </channel>
</rss>
