{"id":63178,"date":"2023-12-05T06:41:47","date_gmt":"2023-12-05T09:41:47","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=63178&#038;preview=true&#038;preview_id=63178"},"modified":"2023-12-06T09:11:58","modified_gmt":"2023-12-06T12:11:58","slug":"jest","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/jest\/","title":{"rendered":"Como Testar Seus Aplicativos com Jest"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/ferramentas-teste-desempenho\/\">Testes<\/a> de software s\u00e3o fundamentais para garantir que seus aplicativos funcionem conforme o esperado, especialmente quando voc\u00ea faz altera\u00e7\u00f5es. A detec\u00e7\u00e3o e a corre\u00e7\u00e3o de erros no in\u00edcio do desenvolvimento s\u00e3o cruciais para manter um c\u00f3digo resiliente e de alta qualidade.<\/p>\n<p>Entre as muitas ferramentas e os muitos frameworks dispon\u00edveis para testes de JavaScript, o Jest \u00e9 um dos mais populares. Um produto da Meta, o Jest apresenta amplos recursos de testes para aplicativos JavaScript e aqueles criados com frameworks JavaScript.<\/p>\n<p>Vamos explorar o framework Jest, seus recursos, e a melhor forma de integr\u00e1-lo ao seu fluxo de trabalho de desenvolvimento.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>O que \u00e9 o Jest?<\/h2>\n<p>O <a href=\"https:\/\/jestjs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jest<\/a> \u00e9 um framework flex\u00edvel e simples de usar. Al\u00e9m de seus recursos principais de testes de JavaScript, oferece configura\u00e7\u00f5es e plugins para dar suporte a testes de aplicativos baseados em Babel, <a href=\"https:\/\/kinsta.com\/pt\/blog\/vite-vs-webpack\/\">webpack<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/vite-vs-webpack\/\">Vite<\/a>,\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/empacotadores-javascript\/\">Parcel<\/a>, ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-typescript\/\">TypeScript<\/a>.<\/p>\n<p>O Jest foi amplamente adotado pelos desenvolvedores e conta com uma s\u00e9rie de plugins criados e mantidos pela comunidade. Ele se destaca por sua facilidade de uso: os testes em JavaScript n\u00e3o exigem configura\u00e7\u00f5es ou plugins adicionais. Mas voc\u00ea tamb\u00e9m pode executar testes mais avan\u00e7ados \u2014 como testar <a href=\"https:\/\/kinsta.com\/pt\/topicos\/frameworks-javascript\/\">frameworks JavaScript<\/a> \u2014 usando algumas op\u00e7\u00f5es de configura\u00e7\u00e3o adicionais.<\/p>\n<h2>Como configurar o Jest para o seu projeto JavaScript<\/h2>\n<p>Vamos explorar como voc\u00ea pode configurar o Jest em um projeto JavaScript existente.<\/p>\n<h3>Pr\u00e9-requisitos<\/h3>\n<p>Para seguir este tutorial, certifique-se de que voc\u00ea tem o seguinte:<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/download\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a> instalado.<\/li>\n<li>O npm (que j\u00e1 faz parte do Node.js) ou o <a href=\"https:\/\/classic.yarnpkg.com\/lang\/en\/docs\/install\/#windows-stable\" target=\"_blank\" rel=\"noopener noreferrer\">Yarn<\/a> instalado.<\/li>\n<li>O <a href=\"https:\/\/www.npmjs.com\/package\/jest\" target=\"_blank\" rel=\"noopener noreferrer\">pacote npm<\/a> do Jest instalado.<\/li>\n<\/ul>\n<h3>Instale o pacote Jest<\/h3>\n<ol start=\"1\">\n<li>Se voc\u00ea ainda n\u00e3o tiver um projeto para acompanhar este tutorial, use <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">este reposit\u00f3rio<\/a> como ponto de partida.<\/li>\n<\/ol>\n<p>O branch <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\"><code>starter-files<\/code><\/a> fornece uma base para criar o aplicativo \u00e0 medida que voc\u00ea segue o tutorial. Consulte o branch <code><a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\/tree\/main\" target=\"_blank\" rel=\"noopener noreferrer\">main<\/a><\/code> para ver o c\u00f3digo deste tutorial e verificar seu c\u00f3digo.<\/p>\n<ol start=\"2\">\n<li>Para instalar o Jest com o <a href=\"https:\/\/kinsta.com\/pt\/blog\/npm-gerenciador-pacotes-node\/\">npm<\/a>, v\u00e1 para o diret\u00f3rio do projeto em seu terminal e execute o seguinte comando:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install --save-dev jest<\/code><\/pre>\n<p>A op\u00e7\u00e3o <code>--save-dev<\/code> informa ao npm para instalar o pacote em <code>devDependencies<\/code>, que cont\u00e9m as depend\u00eancias de que voc\u00ea precisa para o desenvolvimento.<\/p>\n<h3>Configure o Jest<\/h3>\n<p>Embora o Jest geralmente funcione sem configura\u00e7\u00e3o adicional, h\u00e1 duas maneiras de expandir o seu poder: no arquivo <strong>package.json<\/strong> e por meio de um arquivo de configura\u00e7\u00e3o do Jest.<\/p>\n<h4>Configure o Jest em <strong>package<\/strong>.json<\/h4>\n<p>Em seu arquivo <strong>package.json<\/strong>, adicione um objeto chamado <code>jest<\/code> com propriedades tais como as mostradas abaixo:<\/p>\n<pre><code class=\"language-json\">{\n  \u2026\n  \"jest\": {\n    \"displayName\": \"Ecommerce\",\n    \"globals\": {\n      \"PROJECT_NAME\": \"Ecommerce TD\"\n    },\n    \"bail\": 20,\n    \"verbose\": true\n  },\n}<\/code><\/pre>\n<p>Durante o teste, o Jest procura esse objeto e aplica essas configura\u00e7\u00f5es. Voc\u00ea pode visualizar op\u00e7\u00f5es adicionais na <a href=\"https:\/\/jestjs.io\/docs\/26.x\/configuration\" target=\"_blank\" rel=\"noopener noreferrer\">p\u00e1gina de configura\u00e7\u00f5es do Jest<\/a>, mas as propriedades desse objeto incluem:<\/p>\n<ul>\n<li><code>displayName<\/code> \u2014 O Jest adiciona o valor dessa propriedade como um r\u00f3tulo nos resultados dos testes.<\/li>\n<li><code>globals<\/code> \u2014 Mant\u00e9m um valor de objeto para definir vari\u00e1veis globais dispon\u00edveis em seus ambientes de teste.<\/li>\n<li><code>bail<\/code> \u2014 Por padr\u00e3o, o Jest executa todos os testes e exibe os erros nos resultados. <code>bail<\/code> diz ao Jest para parar de executar ap\u00f3s um n\u00famero definido de falhas.<\/li>\n<li><code>verbose<\/code> \u2014 Quando definido como <code>true<\/code>, isso mostra relat\u00f3rios individuais de testes durante a execu\u00e7\u00e3o do teste.<\/li>\n<\/ul>\n<h4>Configure o Jest com um arquivo de configura\u00e7\u00e3o<\/h4>\n<p>Voc\u00ea tamb\u00e9m pode configurar o Jest em um arquivo <strong>jest.config.js<\/strong>. O Jest tamb\u00e9m suporta as extens\u00f5es <strong>.ts<\/strong>, <strong>.mjs<\/strong>, <strong>.cjs<\/strong> e <strong>.json<\/strong>. Ao executar testes, o Jest procura esses arquivos e aplica as configura\u00e7\u00f5es no arquivo que encontrar.<\/p>\n<p>Por exemplo, considere este arquivo <strong>jest.config.js<\/strong>:<\/p>\n<pre><code class=\"language-js\">const config = {\n  displayName: \"Ecommerce\",\n  globals: {\n    \"PROJECT_NAME\": \"Ecommerce TD\"\n  },\n  bail: 20,\n  verbose: true\n}\n\nmodule.exports = config;<\/code><\/pre>\n<p>O c\u00f3digo exporta um objeto de configura\u00e7\u00e3o do Jest com as mesmas propriedades do exemplo anterior.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode usar um arquivo personalizado que contenha um objeto de configura\u00e7\u00e3o serializ\u00e1vel em JSON e passar o caminho do arquivo para a op\u00e7\u00e3o <code>--config<\/code> ao executar seus testes.<\/p>\n<h3>Crie um arquivo de teste b\u00e1sico<\/h3>\n<p>Com o Jest configurado, crie seus arquivos de teste. O Jest analisa os arquivos de teste do seu projeto, executa-os e fornece os resultados. Os arquivos de teste geralmente seguem um formato como <strong>[nome].test.js<\/strong> ou <strong>[nome]-test.js<\/strong>. Esse padr\u00e3o facilita a identifica\u00e7\u00e3o dos arquivos de teste tanto para o Jest quanto para sua equipe.<\/p>\n<p>Considere um arquivo <strong>string-format.js<\/strong> que tenha o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-js\">function truncate(\n  str,\n  count,\n  withEllipsis = true\n) {\n  if (str.length &lt; = count)\n    return str\n\n  const substring = str.substr(0, count)\n\n  if (!withEllipsis)\n    return substring\n\n  return substring + '...'\n}\n\nmodule.exports = { truncate }<\/code><\/pre>\n<p>A fun\u00e7\u00e3o <code>truncate()<\/code> trunca as strings de caracteres em um determinado tamanho, com a op\u00e7\u00e3o de adicionar retic\u00eancias.<\/p>\n<h4>Escreva o teste<\/h4>\n<ol start=\"1\">\n<li>Crie um arquivo de teste chamado <strong>string-format.test.js<\/strong>.<\/li>\n<li>Para manter seus arquivos organizados, coloque <strong>string-format.test.js<\/strong> no mesmo diret\u00f3rio em que voc\u00ea tem o arquivo <strong>string-format.js<\/strong> ou em um diret\u00f3rio de teste espec\u00edfico. Independentemente de onde o arquivo de teste esteja localizado no projeto, o Jest o encontra e executa. Com o Jest, voc\u00ea pode testar seus aplicativos em v\u00e1rios cen\u00e1rios.<\/li>\n<li>Escreva um teste b\u00e1sico em <strong>string-format.test.js<\/strong> da seguinte forma:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const { truncate } = require('.\/string-format')\n\ntest('truncates a string correctly', () = &gt; {\n  expect(truncate(\"I am going home\", 6)).toBe('I am g...')\n})<\/code><\/pre>\n<p>O caso de teste tem a descri\u00e7\u00e3o <code>truncates a string correctly<\/code>. Esse c\u00f3digo usa a fun\u00e7\u00e3o <code>expect<\/code> fornecida pelo Jest, que testa se um valor corresponde ao resultado esperado.<\/p>\n<p>O c\u00f3digo passa <code>truncate(\"I am going home\", 6)<\/code> como um argumento para <code>expect<\/code>. Esse c\u00f3digo testa o valor retornado ao chamar <code>truncate<\/code> com os argumentos <code>\"I am going home\"<\/code> e <code>6<\/code>. A chamada <code>expect<\/code> retorna um objeto de expectativa, que oferece acesso aos matches do Jest.<\/p>\n<p>Ele tamb\u00e9m cont\u00e9m o matcher <code>toBe<\/code>, que tem <code>\"I am g\u2026\"<\/code> como argumento. O matcher <code>toBe<\/code> testa a igualdade entre os valores esperados e os reais.<\/p>\n<h4>Execute o teste<\/h4>\n<p>Para executar seus testes, defina o comando <code>jest<\/code>.<\/p>\n<ol start=\"1\">\n<li>No arquivo <strong>package.json<\/strong> do seu projeto, adicione este script <code>test<\/code>:<\/li>\n<\/ol>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"test\": \"jest\"\n}<\/code><\/pre>\n<ol start=\"2\">\n<li>Agora, execute <code>npm run test<\/code>, <code>npm test<\/code>\u00a0ou <code>npm t<\/code> em seu terminal. Ele executa o Jest para o projeto.<\/li>\n<\/ol>\n<p>Quando voc\u00ea executa os testes, este \u00e9 o resultado:<\/p>\n<figure>\n<figure style=\"width: 927px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-string-format-test.png\" alt=\"Resultado bem-sucedido do teste Jest para string-format.test.js.\" width=\"927\" height=\"275\"><figcaption class=\"wp-caption-text\">Resultado bem-sucedido do teste Jest para string-format.test.js.<\/figcaption><\/figure>\n<p>Os resultados mostram uma su\u00edte de testes (o arquivo <strong style=\"font-size: 1rem\">string-format.test.js<\/strong>), um teste executado com sucesso (<code>\"truncates a string correctly\"<\/code>) e o <code>displayName<\/code> (<code>Ecommerce<\/code>) que voc\u00ea definiu na configura\u00e7\u00e3o.<\/figure>\n<ol start=\"3\">\n<li>Em <strong>string-format.js<\/strong>, se voc\u00ea adicionar um ponto extra para quebrar o c\u00f3digo e executar o teste, ele falhar\u00e1:<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1100px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-truncate-failed.png\" alt=\"Falha no resultado do teste Jest para uma fun\u00e7\u00e3o truncate quebrada.\" width=\"1100\" height=\"612\"><figcaption class=\"wp-caption-text\">Falha no resultado do teste Jest para uma fun\u00e7\u00e3o truncate quebrada.<\/figcaption><\/figure>\n<p>Esse resultado sugere que voc\u00ea quebrou a fun\u00e7\u00e3o <code>truncate<\/code> ou fez atualiza\u00e7\u00f5es que exigem a atualiza\u00e7\u00e3o dos testes.<\/figure>\n<h2>Como escrever testes com Jest<\/h2>\n<h3>Sintaxe de teste do Jest<\/h3>\n<p>A sintaxe propriet\u00e1ria do Jest \u00e9 simples de usar. O Jest exp\u00f5e m\u00e9todos e objetos globais ao seu projeto para a escrita de testes. Alguns de seus termos fundamentais s\u00e3o <code>describe<\/code>, <code>test<\/code>, <code>expect<\/code>, e matchers.<\/p>\n<ul>\n<li><code>describe<\/code>: Essa fun\u00e7\u00e3o agrupa testes relacionados em um arquivo.<\/li>\n<li><code>test<\/code>: Essa fun\u00e7\u00e3o executa o teste. \u00c9 um sin\u00f4nimo para <code>it<\/code>. Ela cont\u00e9m asser\u00e7\u00f5es para os valores que voc\u00ea deseja testar.<\/li>\n<li><code>expect<\/code>: Essa fun\u00e7\u00e3o declara as asser\u00e7\u00f5es para v\u00e1rios valores. Ela fornece acesso a matchers para v\u00e1rias formas de asser\u00e7\u00f5es.<\/li>\n<li>Matchers: Permitem que voc\u00ea fa\u00e7a uma asser\u00e7\u00e3o de um valor de v\u00e1rias maneiras. Voc\u00ea pode afirmar a igualdade de valor, a igualdade booleana e a igualdade contextual (por exemplo, se um array cont\u00e9m o valor).<\/li>\n<\/ul>\n<p>Para us\u00e1-los, considere o exemplo a seguir:<\/p>\n<ol start=\"1\">\n<li>Substitua o teste no arquivo <strong>string-format.test.js<\/strong> pelo seguinte c\u00f3digo:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">describe(\"all string formats work as expected\", () = &gt; {\n  test(\"truncates a string correctly\", () = &gt; {\n    expect(\n      truncate(\"I am going home\", 6)\n    ).toBe(\"I am g...\")\n  })\n})<\/code><\/pre>\n<ol start=\"2\">\n<li>Execute o c\u00f3digo.<\/li>\n<\/ol>\n<p>O resultado se parece com o seguinte:<\/p>\n<figure>\n<figure style=\"width: 993px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-truncate-string.png\" alt=\"Resultado bem-sucedido do teste Jest mostrando o r\u00f3tulo describe.\" width=\"993\" height=\"292\"><figcaption class=\"wp-caption-text\">Resultado bem-sucedido do teste Jest mostrando o r\u00f3tulo describe.<\/figcaption><\/figure>\n<p>A captura de tela mostra que o r\u00f3tulo na fun\u00e7\u00e3o <code>describe<\/code> cria um bloco. Embora o <code>describe<\/code> seja opcional, agrupar os testes em um arquivo com mais contexto \u00e9 \u00fatil.<\/figure>\n<h3>Organize testes em su\u00edtes de testes<\/h3>\n<p>No Jest, um caso de teste consiste na fun\u00e7\u00e3o <code>test<\/code>, a fun\u00e7\u00e3o <code>expect<\/code> e um matcher. Uma cole\u00e7\u00e3o de casos de teste relacionados \u00e9 uma su\u00edte de testes. No exemplo anterior, <strong>string-format.test.js<\/strong> \u00e9 uma su\u00edte de testes que inclui um caso de teste para testar o arquivo <strong>string-format.js<\/strong>.<\/p>\n<p>Suponha que voc\u00ea tenha mais arquivos em seu projeto, como <strong>file-operations.js<\/strong>, <strong>api-logger.js<\/strong> e <strong>number-format.js<\/strong>. Voc\u00ea pode criar su\u00edtes de testes para esses arquivos, como <strong>file-operations.test.js<\/strong>, <strong>api-logger.test.js<\/strong> e <strong>number-format.test.js<\/strong>.<\/p>\n<h3>Escreva asser\u00e7\u00f5es simples com os matchers do Jest<\/h3>\n<p>Exploramos um exemplo de uso do matcher <code>toBe<\/code>. Asser\u00e7\u00f5es com <a href=\"https:\/\/jestjs.io\/docs\/expect#matchers\" target=\"_blank\" rel=\"noopener noreferrer\">outros matchers do Jest<\/a> incluem:<\/p>\n<ul>\n<li><code>toEqual<\/code> \u2014 Para testar a igualdade &#8220;detalhada&#8221; em inst\u00e2ncias de objetos.<\/li>\n<li><code>toBeTruthy<\/code> \u2014 Para testar se um valor \u00e9 verdadeiro em um contexto booleano.<\/li>\n<li><code>toBeFalsy<\/code> \u2014 Para testar se um valor \u00e9 falso em um contexto booleano.<\/li>\n<li><code>toContain<\/code> \u2014 Para testar se um array cont\u00e9m um valor.<\/li>\n<li><code>toThrow<\/code> \u2014 Para testar se uma fun\u00e7\u00e3o invocada gera um erro.<\/li>\n<li><code>stringContaining<\/code> \u2014 Para testar se uma string cont\u00e9m uma substring.<\/li>\n<\/ul>\n<p>Vamos explorar exemplos usando alguns desses matchers.<\/p>\n<p>Voc\u00ea pode, por exemplo, esperar que uma fun\u00e7\u00e3o ou c\u00f3digo retorne um objeto com propriedades e valores espec\u00edficos.<\/p>\n<ol start=\"1\">\n<li>Use o snippet de c\u00f3digo abaixo para testar essa funcionalidade. Nesse caso, voc\u00ea deseja afirmar que o objeto retornado \u00e9 igual a um objeto esperado.<\/li>\n<\/ol>\n<pre><code class=\"language-js\">expect({\n  name: \"Joe\",\n  age: 40\n}).toBe({\n  name: \"Joe\",\n  age: 40\n})<\/code><\/pre>\n<p>Este exemplo usa <code>toBe<\/code>. O teste falha porque esse matcher n\u00e3o verifica a igualdade detalhada \u2014 ele verifica o valor, n\u00e3o todas as propriedades.<\/p>\n<ol start=\"2\">\n<li>Use o matcher\u00a0<code>toEqual<\/code> para verificar a igualdade detalhada:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">expect({\n  name: \"Joe\",\n  age: 40\n}).toEqual({\n  name: \"Joe\",\n  age: 40\n})<\/code><\/pre>\n<p>Este teste \u00e9 bem-sucedido porque os dois objetos s\u00e3o &#8220;iguais&#8221;, o que significa que todas as suas propriedades s\u00e3o iguais.<\/p>\n<ol start=\"3\">\n<li>Experimente outro exemplo de matcher que testa se o array definido cont\u00e9m um elemento espec\u00edfico.<\/li>\n<\/ol>\n<pre><code class=\"language-js\">expect([\"orange\", \"pear\", \"apple\"]).toContain(\"mango\")<\/code><\/pre>\n<p>Este teste falha porque <code>toContain<\/code> afirma que o array <code>[\"orange\", \"pear\", \"apple\"]<\/code> cont\u00e9m o valor esperado <code>\"mango\"<\/code>, mas o array n\u00e3o cont\u00e9m.<\/p>\n<ol start=\"4\">\n<li>Use vari\u00e1veis para o mesmo teste, como no c\u00f3digo abaixo:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const fruits = [\"orange\", \"pear\", \"apple\"];\nconst expectedFruit = \"mango\";\n\nexpect(fruits).toContain(expectedFruit)<\/code><\/pre>\n<h3>Teste c\u00f3digo ass\u00edncrono<\/h3>\n<p>At\u00e9 agora, testamos c\u00f3digo s\u00edncrono \u2014 express\u00f5es que retornam um valor antes de o c\u00f3digo executar a linha seguinte. Voc\u00ea tamb\u00e9m pode usar o Jest para c\u00f3digo ass\u00edncrono com <code>async<\/code>, <code>await<\/code>, ou Promises.<\/p>\n<p>Por exemplo, o arquivo<strong> apis.js<\/strong> tem uma fun\u00e7\u00e3o para fazer uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/solicitacoes-http-javascript\/\" target=\"_blank\" rel=\"noopener noreferrer\">solicita\u00e7\u00e3o de API<\/a>:<\/p>\n<pre><code class=\"language-js\">function getTodos() {\n  return fetch('https:\/\/jsonplaceholder.typicode.com\/todos\/1')\n}\n<\/code><\/pre>\n<p>A fun\u00e7\u00e3o <code>getTodos<\/code> envia uma solicita\u00e7\u00e3o <code>GET<\/code> para <code>https:\/\/jsonplaceholder.typicode.com\/todos\/1<\/code>.<\/p>\n<ol start=\"1\">\n<li>Crie um arquivo chamado <strong>apis.test.js<\/strong> com o seguinte c\u00f3digo para testar a <a href=\"https:\/\/jsonplaceholder.typicode.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">API falsa<\/a>:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const { getTodos } = require('.\/apis')\n\ntest(\"gets a todo object with the right properties\", () = &gt; {\n  return getTodos()\n    .then((response) = &gt; {\n      return response.json()\n    })\n    .then((data) = &gt; {\n      expect(data).toHaveProperty('userId')\n      expect(data).toHaveProperty('id')\n      expect(data).toHaveProperty('title')\n      expect(data).toHaveProperty('completed')\n      expect(data).toHaveProperty('description')\n    })\n})<\/code><\/pre>\n<p>Este caso de teste invoca a fun\u00e7\u00e3o <code>getTodos<\/code> que obt\u00e9m um objeto <code>todo<\/code>. Quando resolve a Promise, usa o m\u00e9todo <code>.then<\/code> para obter o valor resolvido.<\/p>\n<p>Nesse valor, o c\u00f3digo retorna <code>response.json()<\/code>, que \u00e9 outra Promise que converte a resposta para o formato JSON. Outro m\u00e9todo <code>.then<\/code> obt\u00e9m o objeto JSON que cont\u00e9m o <code>expect<\/code> e matchers. O c\u00f3digo afirma que o objeto JSON inclui cinco propriedades: <code>userId<\/code>, <code>id<\/code>, <code>title<\/code>, <code>completed<\/code>, e <code>description<\/code>.<\/p>\n<ol start=\"2\">\n<li>Execute os testes:<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1197px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-apis-failed.png\" alt=\"Resultado do teste Jest mostrando um teste com falha para c\u00f3digo ass\u00edncrono.\" width=\"1197\" height=\"794\"><figcaption class=\"wp-caption-text\">Resultado do teste Jest mostrando um teste com falha para c\u00f3digo ass\u00edncrono.<\/figcaption><\/figure>\n<p>Como mostra a captura de tela, o teste para <code>getTodos()<\/code> falha. Ele espera a propriedade <code>description<\/code>, mas a API n\u00e3o a retorna. Com essas informa\u00e7\u00f5es, agora voc\u00ea pode pedir \u00e0 equipe de gerenciamento de API da sua empresa que inclua essa propriedade se o aplicativo precisar dela ou que atualize os testes para corresponder \u00e0 resposta da API.<\/figure>\n<ol start=\"3\">\n<li>Remova a asser\u00e7\u00e3o da propriedade <code>description<\/code> e execute novamente os testes:<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1198px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-async.png\" alt=\"Resultado do teste Jest mostrando um teste bem-sucedido para c\u00f3digo ass\u00edncrono.\" width=\"1198\" height=\"397\"><figcaption class=\"wp-caption-text\">Resultado do teste Jest mostrando um teste bem-sucedido para c\u00f3digo ass\u00edncrono.<\/figcaption><\/figure>\n<p>A captura de tela mostra que tudo passou no teste.<\/figure>\n<ol start=\"4\">\n<li>Agora voc\u00ea pode tentar usar <code>async\/await<\/code> em vez do tratamento Promise tradicional:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">test(\"gets a todo object with the right properties\", async () = &gt; {\n  const response = await getTodos()\n  const data = await response.json()\n\n  expect(data).toHaveProperty(\"userId\")\n  expect(data).toHaveProperty(\"id\")\n  expect(data).toHaveProperty(\"title\")\n  expect(data).toHaveProperty(\"completed\")\n})<\/code><\/pre>\n<p>A palavra-chave <code>async<\/code> agora est\u00e1 antes da fun\u00e7\u00e3o. O c\u00f3digo usa <code>await<\/code> antes de <code>getTodos()<\/code> e <code>await<\/code> antes de <code>response.json()<\/code>.<\/p>\n<h2>Recursos avan\u00e7ados do Jest<\/h2>\n<h3>Fun\u00e7\u00f5es e m\u00f3dulos mock<\/h3>\n<p>Voc\u00ea pode querer testar uma express\u00e3o com depend\u00eancias externas ao escrever testes. Em alguns casos, especialmente em testes de unidade, seus testes devem ser isolados de efeitos externos. Nesse caso, voc\u00ea pode simular suas fun\u00e7\u00f5es ou m\u00f3dulos com o Jest para controlar melhor seus testes.<\/p>\n<ol start=\"1\">\n<li>Por exemplo, considere um arquivo <strong>functions.js<\/strong> que cont\u00e9m o seguinte c\u00f3digo:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">function multipleCalls(count, callback) {\n  if (count &lt; 0) return;\n\n  for (let counter = 1; counter &lt;= count; counter++) {\n    callback()\n  }\n}<\/code><\/pre>\n<p>A fun\u00e7\u00e3o <code>multipleCalls<\/code> \u00e9 executada com base no valor de <code>count<\/code>. Ela depende da fun\u00e7\u00e3o callback \u2014 a depend\u00eancia externa. Seu objetivo \u00e9 saber se o <code>multipleCalls<\/code> executa a depend\u00eancia externa corretamente.<\/p>\n<ol start=\"2\">\n<li>Para simular a depend\u00eancia externa e rastrear o estado da depend\u00eancia em seu arquivo de teste, <strong>functions.test.js<\/strong>, use este c\u00f3digo:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const { multipleCalls } = require('.\/functions')\n\ntest(\"functions are called multiple times correctly\", () =&gt; {\n  const mockFunction = jest.fn()\n\n  multipleCalls(5, mockFunction)\n\n  expect(\n    mockFunction.mock.calls.length\n  ).toBe(5)\n})<\/code><\/pre>\n<p>Aqui, o m\u00e9todo <code>fn<\/code> do objeto <code>jest<\/code> cria uma fun\u00e7\u00e3o mock. Em seguida, o c\u00f3digo executa <code>multipleCalls<\/code> passando <code>5<\/code> e a fun\u00e7\u00e3o mock como argumentos. Em seguida, ele afirma que <code>mockFunction<\/code> \u00e9 chamada cinco vezes. A propriedade <code>mock<\/code> cont\u00e9m informa\u00e7\u00f5es sobre como o c\u00f3digo chama a fun\u00e7\u00e3o e os valores retornados.<\/p>\n<ol start=\"3\">\n<li>Quando voc\u00ea executa o teste, este \u00e9 o resultado esperado:<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1191px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-multiplecalls.png\" alt=\"Resultado bem-sucedido do teste Jest com uma fun\u00e7\u00e3o mock.\" width=\"1191\" height=\"465\"><figcaption class=\"wp-caption-text\">Resultado bem-sucedido do teste Jest com uma fun\u00e7\u00e3o mock.<\/figcaption><\/figure>\n<p>Conforme demonstrado, o c\u00f3digo chama a <code>mockFunction<\/code> cinco vezes.<\/figure>\n<p>No c\u00f3digo, a fun\u00e7\u00e3o mock imita uma depend\u00eancia externa. N\u00e3o importa qual \u00e9 a depend\u00eancia externa quando o aplicativo usa <code>multipleCalls<\/code> na produ\u00e7\u00e3o. Seu teste de unidade n\u00e3o se importa com o funcionamento da depend\u00eancia externa. Apenas verifica se o <code>multipleCalls<\/code> funciona conforme o esperado.<\/p>\n<ol start=\"4\">\n<li>Para simular m\u00f3dulos, use o m\u00e9todo <code>mock<\/code> e passe um caminho de arquivo, que \u00e9 o m\u00f3dulo:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const {\n  truncate,\n} = require(\".\/string-format\")\n\njest.mock(\".\/string-format.js\")<\/code><\/pre>\n<p>Este c\u00f3digo imita todas as fun\u00e7\u00f5es que o <strong>string-format.js<\/strong> exporta e rastreia com que frequ\u00eancia ele as chama. O <code>truncate<\/code> do m\u00f3dulo se torna uma fun\u00e7\u00e3o mock, o que faz com que a fun\u00e7\u00e3o perca sua l\u00f3gica original. Voc\u00ea pode descobrir quantas vezes o <code>truncate<\/code> \u00e9 executado em seus testes na propriedade <code>truncate.mock.calls.length<\/code>.<\/p>\n<p>Se voc\u00ea tiver um erro ou seu c\u00f3digo n\u00e3o funcionar, compare seu c\u00f3digo com a <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-javascript\/tree\/main\" target=\"_blank\" rel=\"noopener noreferrer\">implementa\u00e7\u00e3o completa<\/a>.<\/p>\n<h2>Teste componentes React com o Jest e a React Testing Library<\/h2>\n<p>Se voc\u00ea ainda n\u00e3o tiver um projeto para acompanhar este tutorial, pode usar <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-react\" target=\"_blank\" rel=\"noopener noreferrer\">este projeto de exemplo do React<\/a> como ponto de partida. O branch <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-react\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\"><code>starter-files<\/code><\/a> ajuda voc\u00ea a come\u00e7ar a compor o c\u00f3digo \u00e0 medida que segue o tutorial. Use o branch <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-jest-react\/tree\/main\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>main<\/code><\/a> como refer\u00eancia para verificar seu c\u00f3digo em rela\u00e7\u00e3o ao c\u00f3digo completo deste tutorial.<\/p>\n<p>Voc\u00ea pode usar o Jest para testar frameworks JavaScript como o <a href=\"https:\/\/kinsta.com\/pt\/topicos\/react\/\">React<\/a>. Quando voc\u00ea cria projetos React usando o <a href=\"https:\/\/create-react-app.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">Create React App<\/a>, eles d\u00e3o suporte \u00e0 React Testing Library e o Jest por padr\u00e3o. Se voc\u00ea criar um projeto React sem o Create React App, instale o Jest para testar o React com o Babel e a <a href=\"https:\/\/github.com\/kentcdodds\/react-testing-library\" target=\"_blank\" rel=\"noopener noreferrer\">React Testing Library<\/a>. Se voc\u00ea clonar o branch <code>starter-app<\/code>, n\u00e3o precisa instalar depend\u00eancias ou aplicar configura\u00e7\u00f5es.<\/p>\n<ol start=\"1\">\n<li>Se estiver usando o projeto de exemplo, use este comando para instalar as depend\u00eancias necess\u00e1rias:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install --save-dev babel-jest @babel\/preset-env @babel\/preset-react react-testing-library<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m pode usar o <a href=\"https:\/\/www.npmjs.com\/package\/enzyme\" target=\"_blank\" rel=\"noopener noreferrer\">Enzyme<\/a> em vez da React Testing Library.<\/p>\n<ol start=\"2\">\n<li>Atualize as configura\u00e7\u00f5es do Babel em <strong>babel.config.js<\/strong>, ou crie este arquivo se ele n\u00e3o existir:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">module.exports = {\n  presets: [\n    '@babel\/preset-env',\n      ['@babel\/preset-react', {runtime: 'automatic'}],\n  ],\n};<\/code><\/pre>\n<ol start=\"3\">\n<li>Considere o arquivo <strong>src\/SubmitButton.js<\/strong>\u00a0que tem o seguinte c\u00f3digo:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">import React, { useState } from 'react'\n\nexport default function SubmitButton(props) {\n  const {id, label, onSubmit} = props\n  const [isLoading, setisLoading] = useState(false)\n\n  const submit = () =&gt; {\n    setisLoading(true)\n    onSubmit()\n  }\n\n  return <button disabled=\"disabled\" data-testid=\"{id}\"><\/button><\/code><\/pre>\n<p>Esse componente <code>SubmitButton<\/code> recebe tr\u00eas propriedades:<\/p>\n<ul>\n<li><code>id<\/code> \u2014 O identificador do bot\u00e3o.<\/li>\n<li><code>label<\/code> \u2014 O texto a ser renderizado no bot\u00e3o.<\/li>\n<li><code>onSubmit<\/code> \u2014 Qual fun\u00e7\u00e3o \u00e9 acionada quando algu\u00e9m clica no bot\u00e3o.<\/li>\n<\/ul>\n<p>O c\u00f3digo atribui a propriedade <code>id<\/code> ao atributo <code>data-testid<\/code>, que identifica um elemento para teste.<\/p>\n<p>O componente tamb\u00e9m rastreia o estado <code>isLoading<\/code> e o atualiza para <code>true<\/code> quando algu\u00e9m clica no bot\u00e3o.<\/p>\n<ol start=\"4\">\n<li>Crie o teste para esse componente. Insira o seguinte c\u00f3digo em um arquivo <strong>SubmitButton.test.js<\/strong>:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">import {fireEvent, render, screen} from \"@testing-library\/react\"\nimport \"@testing-library\/jest-dom\"\nimport SubmitButton from \".\/SubmitButton\"\n\ntest(\"SubmitButton becomes disabled after click\", () =&gt; {\n  const submitMock = jest.fn()\n\n  render(\n    &lt;SubmitButton\n      id=\"submit-details\"\n      label=\"Submit\"\n      onSubmit={submitMock}\n    \/ &gt;\n  )\n\n  expect(screen.getByTestId(\"submit-details\")).not.toBeDisabled()\n\n  fireEvent.submit(screen.getByTestId(\"submit-details\"))\n\n  expect(screen.getByTestId(\"submit-details\")).toBeDisabled()\n})<\/code><\/pre>\n<p>O c\u00f3digo acima renderiza o componente <code>SubmitButton<\/code> e usa o m\u00e9todo de consulta <code>screen.getByTestId<\/code> para obter o node DOM pelo atributo <code>data-testid<\/code>.<\/p>\n<p>O primeiro <code>expect<\/code> \u00e9 <code>getByTestId(\"submit-details\")<\/code> e usa o modificador <code>not<\/code> e o matcher\u00a0<code>toBeDisabled<\/code> (exposto a partir de <code>react-testing-library<\/code>) para afirmar que o bot\u00e3o n\u00e3o est\u00e1 desativado. Use o modificador <code>not<\/code> com cada matcher para afirmar o oposto do matcher.<\/p>\n<p>Em seguida, o c\u00f3digo dispara o evento <code>submit<\/code> no componente e verifica que o bot\u00e3o est\u00e1 desativado. Voc\u00ea pode encontrar mais matchers personalizados na <a href=\"https:\/\/github.com\/testing-library\/jest-dom#custom-matchers\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o da biblioteca de testes<\/a>.<\/p>\n<ol start=\"5\">\n<li>Agora, execute os testes. Se voc\u00ea clonou o branch <code>starter-files<\/code>, certifique-se de ter todas as depend\u00eancias do projeto instaladas executando <code>npm install<\/code> antes de iniciar os testes.<\/li>\n<\/ol>\n<figure>\n<p><figure style=\"width: 941px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-truncate-react.png\" alt=\"Resultado de teste Jest mostrando que um componente react passou no teste.\" width=\"941\" height=\"353\"><figcaption class=\"wp-caption-text\">Resultado de teste Jest mostrando que um componente react passou no teste.<\/figcaption><\/figure><\/figure>\n<h3>Execute relat\u00f3rios de cobertura de c\u00f3digo<\/h3>\n<p>O Jest tamb\u00e9m oferece relat\u00f3rios de cobertura de c\u00f3digo para mostrar quanto do seu projeto voc\u00ea est\u00e1 testando.<\/p>\n<ol start=\"1\">\n<li>Passe a op\u00e7\u00e3o <code>--coverage<\/code> para o Jest. Em seu script Jest em <strong>package.json <\/strong>(no projeto JavaScript), atualize o comando Jest com esta op\u00e7\u00e3o de cobertura:<\/li>\n<\/ol>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"test\": \"jest --coverage\"\n}<\/code><\/pre>\n<ol start=\"2\">\n<li>Execute <code>npm run test<\/code> para testar seu c\u00f3digo. Voc\u00ea obt\u00e9m um relat\u00f3rio como o seguinte:<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1183px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-coverage-report.png\" alt=\"Relat\u00f3rio de cobertura do Jest bem-sucedido para cada su\u00edte de testes.\" width=\"1183\" height=\"631\"><figcaption class=\"wp-caption-text\">Relat\u00f3rio de cobertura do Jest bem-sucedido para cada su\u00edte de testes.<\/figcaption><\/figure>\n<p>Esse relat\u00f3rio mostra que o Jest testou 100% das fun\u00e7\u00f5es em <strong style=\"font-size: 1rem\">SubmitButton.js<\/strong> e <strong style=\"font-size: 1rem\">string-format.js<\/strong>. Ele tamb\u00e9m indica que o Jest n\u00e3o testou nenhuma declara\u00e7\u00e3o e linha em <strong style=\"font-size: 1rem\">string-format.js<\/strong>. A cobertura do teste mostra que as linhas n\u00e3o cobertas em <strong style=\"font-size: 1rem\">string-format.js<\/strong> s\u00e3o a 7 e a 12.<\/figure>\n<p>Na linha 7, <code>return str<\/code> na fun\u00e7\u00e3o <code>truncate<\/code> n\u00e3o \u00e9 executada porque a condi\u00e7\u00e3o <code>if (str.length &lt;= count)<\/code> retorna <code>false<\/code>.<\/p>\n<p>Na linha 12, tamb\u00e9m na fun\u00e7\u00e3o <code>truncate<\/code>, a <code>return substring<\/code> n\u00e3o \u00e9 executada porque a condi\u00e7\u00e3o <code>if (!withEllipsis)<\/code> retorna <code>false.<\/code><\/p>\n<h2>Integre o Jest ao seu fluxo de trabalho de desenvolvimento<\/h2>\n<p>Vejamos como voc\u00ea pode integrar esses testes para melhorar seu fluxo de trabalho de desenvolvimento.<\/p>\n<h3>Execute testes em watch mode<\/h3>\n<p>Em vez de executar testes manualmente, voc\u00ea pode execut\u00e1-los automaticamente quando alterar seu c\u00f3digo usando o watch mode.<\/p>\n<ol start=\"1\">\n<li>Para ativar o watch mode, atualize seu script de comando Jest em <strong>package.json <\/strong>(no projeto JavaScript) adicionando a op\u00e7\u00e3o <code>--watchAll<\/code>:<\/li>\n<\/ol>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"test\": \"jest --coverage --watchAll\"\n}<\/code><\/pre>\n<ol start=\"2\">\n<li>Execute <code>npm run test<\/code>. Isso aciona o Jest em watch mode:<\/li>\n<\/ol>\n<figure>\n<figure style=\"width: 1197px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-watch-mode.png\" alt=\"Executando o Jest em watch mode.\" width=\"1197\" height=\"730\"><figcaption class=\"wp-caption-text\">Executando o Jest em watch mode.<\/figcaption><\/figure>\n<p>Os testes s\u00e3o executados sempre que voc\u00ea altera o projeto. Essa abordagem promove feedback cont\u00ednuo \u00e0 medida que voc\u00ea constr\u00f3i seu aplicativo.<\/figure>\n<h3>Configure hooks de pre-commit<\/h3>\n<p>Em ambientes Git, os hooks executam scripts sempre que ocorre um evento espec\u00edfico (como pull, push ou commit). Os hooks de pre-commit definem quais scripts s\u00e3o executados para o evento de pre-commit (que o c\u00f3digo aciona antes de fazer um commit).<\/p>\n<p>O commit s\u00f3 ter\u00e1 sucesso se o script n\u00e3o gerar um erro.<\/p>\n<p>A execu\u00e7\u00e3o do Jest antes do pre-commit garante que nenhum dos seus testes falhe antes do commit.<\/p>\n<p>Voc\u00ea pode usar v\u00e1rias bibliotecas para configurar <a href=\"https:\/\/kinsta.com\/pt\/blog\/git-hooks\/\">hooks do git<\/a> em seu projeto, tal como a <a href=\"https:\/\/www.npmjs.com\/package\/ghooks\" target=\"_blank\" rel=\"noopener noreferrer\">ghooks<\/a>.<\/p>\n<ol start=\"1\">\n<li>Instale <code>ghooks<\/code> em <code>devDependencies<\/code>:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install ghooks --save-dev<\/code><\/pre>\n<ol start=\"2\">\n<li>Adicione um objeto <code>configs<\/code> no n\u00edvel superior do seu arquivo <strong>package.json<\/strong> (no projeto JavaScript).<\/li>\n<li>Adicione um objeto <code>ghooks<\/code> em <code>configs<\/code>.<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>Adicione uma propriedade com uma chave de <code>pre-commit<\/code> e um valor de <code>jest<\/code>.<\/li>\n<\/ol>\n<pre><code class=\"language-json\">{\n  \u2026\n  \"config\": {\n    \"ghooks\": {\n      \"pre-commit\": \"jest\"\n    }\n  },\n}<\/code><\/pre>\n<ol start=\"5\">\n<li>Fa\u00e7a o commit do c\u00f3digo. O c\u00f3digo aciona o hook de pre-commit, que executa o Jest:<\/li>\n<\/ol>\n<figure>\n<p><figure style=\"width: 1183px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/jest-test-pre-commit.png\" alt=\"Executando o Jest durante o pre-commit usando ghooks.\" width=\"1183\" height=\"803\"><figcaption class=\"wp-caption-text\">Executando o Jest durante o pre-commit usando ghooks.<\/figcaption><\/figure><\/figure>\n<h2>Resumo<\/h2>\n<p>Agora voc\u00ea sabe como integrar o Jest ao seu fluxo de trabalho de desenvolvimento para execut\u00e1-lo automaticamente sempre que fizer uma altera\u00e7\u00e3o. Essa abordagem fornece feedback cont\u00ednuo para que voc\u00ea possa corrigir rapidamente quaisquer problemas de c\u00f3digo antes de liberar suas altera\u00e7\u00f5es para a produ\u00e7\u00e3o.<\/p>\n<p>Ao <a href=\"https:\/\/sevalla.com\/application-hosting\/\">hospedar seu aplicativo com a Kinsta<\/a>, voc\u00ea se beneficia de uma infraestrutura r\u00e1pida e segura, implantando seus projetos na infraestrutura constru\u00edda na rede de n\u00edvel premium do Google Cloud Platform e m\u00e1quinas C2. Voc\u00ea pode escolher entre os 27 centros de dados e uma CDN habilitada para HTTP\/3 com 300 PoPs.<\/p>\n<p>Mantenha-se seguro com a tecnologia de cont\u00eaineres isolados, dois firewalls robustos e prote\u00e7\u00e3o avan\u00e7ada contra DDoS com tecnologia Cloudflare. E voc\u00ea pode integrar aplicativos ou automatizar fluxos de trabalho com a <a href=\"https:\/\/kinsta.com\/docs\/kinsta-api\/-intro\/\">API da Kinsta<\/a>.<\/p>\n<p>Configure o Jest e navegue pelos recursos da Kinsta hoje mesmo para <a href=\"https:\/\/kinsta.com\/javascript\/\">aprimorar seus aplicativos JavaScript<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Testes de software s\u00e3o fundamentais para garantir que seus aplicativos funcionem conforme o esperado, especialmente quando voc\u00ea faz altera\u00e7\u00f5es. A detec\u00e7\u00e3o e a corre\u00e7\u00e3o de erros &#8230;<\/p>\n","protected":false},"author":290,"featured_media":63179,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[977,978],"class_list":["post-63178","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-tutoriais-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Testar Seus Aplicativos com Jest - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Vamos explorar o popular framework Jest, seus recursos e a melhor forma de integr\u00e1-lo ao seu fluxo de trabalho de desenvolvimento.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/jest\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Testar Seus Aplicativos com Jest\" \/>\n<meta property=\"og:description\" content=\"Vamos explorar o popular framework Jest, seus recursos e a melhor forma de integr\u00e1-lo ao seu fluxo de trabalho de desenvolvimento.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/jest\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-05T09:41:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-06T12:11:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/09\/jest.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marcia Ramos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Vamos explorar o popular framework Jest, seus recursos e a melhor forma de integr\u00e1-lo ao seu fluxo de trabalho de desenvolvimento.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/09\/jest.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jest\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jest\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Como Testar Seus Aplicativos com Jest\",\"datePublished\":\"2023-12-05T09:41:47+00:00\",\"dateModified\":\"2023-12-06T12:11:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jest\/\"},\"wordCount\":3305,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jest\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/09\/jest.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/jest\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jest\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/jest\/\",\"name\":\"Como Testar Seus Aplicativos com Jest - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jest\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jest\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/09\/jest.jpg\",\"datePublished\":\"2023-12-05T09:41:47+00:00\",\"dateModified\":\"2023-12-06T12:11:58+00:00\",\"description\":\"Vamos explorar o popular framework Jest, seus recursos e a melhor forma de integr\u00e1-lo ao seu fluxo de trabalho de desenvolvimento.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jest\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/jest\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jest\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/09\/jest.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/09\/jest.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jest\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frameworks JavaScript\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/frameworks-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Testar Seus Aplicativos com Jest\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"caption\":\"Marcia Ramos\"},\"description\":\"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/marciadiasramos\/\"],\"honorificSuffix\":\"B.Sc.\",\"gender\":\"Female\",\"knowsLanguage\":[\"English\",\"Portuguese\"],\"jobTitle\":\"Editorial Team Lead\",\"worksFor\":\"Kinsta Inc.\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Testar Seus Aplicativos com Jest - Kinsta\u00ae","description":"Vamos explorar o popular framework Jest, seus recursos e a melhor forma de integr\u00e1-lo ao seu fluxo de trabalho de desenvolvimento.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/jest\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Testar Seus Aplicativos com Jest","og_description":"Vamos explorar o popular framework Jest, seus recursos e a melhor forma de integr\u00e1-lo ao seu fluxo de trabalho de desenvolvimento.","og_url":"https:\/\/kinsta.com\/pt\/blog\/jest\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-12-05T09:41:47+00:00","article_modified_time":"2023-12-06T12:11:58+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/09\/jest.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"Vamos explorar o popular framework Jest, seus recursos e a melhor forma de integr\u00e1-lo ao seu fluxo de trabalho de desenvolvimento.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/09\/jest.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Marcia Ramos","Tempo estimado de leitura":"18 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/jest\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jest\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Como Testar Seus Aplicativos com Jest","datePublished":"2023-12-05T09:41:47+00:00","dateModified":"2023-12-06T12:11:58+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jest\/"},"wordCount":3305,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jest\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/09\/jest.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/jest\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/jest\/","url":"https:\/\/kinsta.com\/pt\/blog\/jest\/","name":"Como Testar Seus Aplicativos com Jest - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jest\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jest\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/09\/jest.jpg","datePublished":"2023-12-05T09:41:47+00:00","dateModified":"2023-12-06T12:11:58+00:00","description":"Vamos explorar o popular framework Jest, seus recursos e a melhor forma de integr\u00e1-lo ao seu fluxo de trabalho de desenvolvimento.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jest\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/jest\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/jest\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/09\/jest.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/09\/jest.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/jest\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Frameworks JavaScript","item":"https:\/\/kinsta.com\/pt\/topicos\/frameworks-javascript\/"},{"@type":"ListItem","position":3,"name":"Como Testar Seus Aplicativos com Jest"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","caption":"Marcia Ramos"},"description":"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.","sameAs":["https:\/\/www.linkedin.com\/in\/marciadiasramos\/"],"honorificSuffix":"B.Sc.","gender":"Female","knowsLanguage":["English","Portuguese"],"jobTitle":"Editorial Team Lead","worksFor":"Kinsta Inc.","url":"https:\/\/kinsta.com\/pt\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/63178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=63178"}],"version-history":[{"count":12,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/63178\/revisions"}],"predecessor-version":[{"id":65654,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/63178\/revisions\/65654"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/63178\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/63178\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/63178\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/63178\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/63178\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/63178\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/63178\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/63178\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/63179"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=63178"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=63178"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=63178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}