{"componentChunkName":"component---src-templates-docs-js","path":"/docs/testing.html","result":{"data":{"markdownRemark":{"html":"<p>Você pode testar componentes React de forma similar a como testa outros códigos JavaScript.</p>\n<p>Há algumas maneiras de testar componentes React. Em geral, os testes podem ser feitos de duas formas:</p>\n<ul>\n<li><strong>Renderizando árvores de componentes</strong> em um ambiente de testes simplificado e confirmando o seu output.</li>\n<li><strong>Executando uma aplicação completa</strong> em um ambiente de navegador real (também conhecido como testes “<em>end-to-end</em>”).</li>\n</ul>\n<p>Esta seção da documentação se concentra nas estratégias de teste para o primeiro caso. Embora os testes <em>end-to-end</em> completos possam ser muito úteis para impedir regressões em casos importantes, esses testes não estão relacionados a componentes React em particular e estão fora do escopo desta seção.</p>\n<h3 id=\"tradeoffs\"><a href=\"#tradeoffs\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Tradeoffs </h3>\n<p>Ao escolher uma ferramenta de teste, vale a pena considerar alguns tradeoffs:</p>\n<ul>\n<li><strong>Velocidade de iteração vs Ambiente real:</strong> Algumas ferramentas oferecem um ciclo de feedback muito rápido entre fazer uma alteração e ver o resultado, mas não reflete o comportamento do navegador com precisão. Outras ferramentas podem usar um ambiente de navegador real, mas reduzem a velocidade da iteração e são mais precárias em um servidor de integração contínua.</li>\n<li><strong>Quanto <em>mock</em> eu devo usar:</strong> Nos componentes, a diferença entre um teste de “unidade” e um de “integração” pode ser confusa. Se você estiver testando um formulário, o teste também deve testar os botões dentro dele? Ou um componente de botão deve ter seu próprio conjunto de testes? A refatoração de um botão deve falhar o teste do formulário?</li>\n</ul>\n<p>Diferentes respostas podem funcionar para diferentes times e produtos.</p>\n<h3 id=\"tools\"><a href=\"#tools\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Ferramentas recomendadas </h3>\n<p><strong><a href=\"https://facebook.github.io/jest/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Jest</a></strong> é um <em>test runner</em> JavaScript que permite a você acessar o DOM através do <a href=\"/docs/testing-environments.html#mocking-a-rendering-surface\"><code class=\"gatsby-code-text\">jsdom</code></a>. Mesmo o jsdom sendo apenas uma aproximação de como um navegador funciona, é bom o suficiente para testar componentes React. Jest oferece uma excelente velocidade de iteração combinada com recursos poderosos como <em>mock</em> de <a href=\"/docs/testing-environments.html#mocking-modules\">módulos</a> e <a href=\"/docs/testing-environments.html#mocking-timers\">temporizadores</a> para que você tenha mais controle sobre como o código é executado.</p>\n<p><strong><a href=\"https://testing-library.com/react\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">React Testing Library</a></strong> é um conjunto de utilitários que permitem testar componentes React sem depender dos detalhes de implementação. Essa abordagem facilita a refatoração e também te orienta para as melhores práticas de acessibilidade. Embora não forneça uma maneira de renderizar “superficialmente” um componente sem seus filhos, um <em>test runner</em> como o Jest permite fazer isso através de <a href=\"/docs/testing-recipes.html#mocking-modules\">mock</a>.</p>\n<h3 id=\"learn-more\"><a href=\"#learn-more\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Saiba Mais </h3>\n<p>Esta seção está dividida em duas páginas:</p>\n<ul>\n<li><a href=\"/docs/testing-recipes.html\">Receitas</a>: Padrões conhecidos ao escrever testes para componentes React.</li>\n<li><a href=\"/docs/testing-environments.html\">Ambientes</a>: O que considerar ao configurar um ambiente de teste para componentes React .</li>\n</ul>","frontmatter":{"title":"Visão Geral sobre Testes","next":"testing-recipes.html","prev":null},"fields":{"path":"content/docs/testing.md","slug":"docs/testing.html"}}},"pageContext":{"slug":"docs/testing.html"}},"staticQueryHashes":[]}