diff --git a/docs/docs/testing-react-components.md b/docs/docs/testing-react-components.md index a0d096e70..4a41fb42f 100644 --- a/docs/docs/testing-react-components.md +++ b/docs/docs/testing-react-components.md @@ -1,32 +1,32 @@ --- -title: Testing React Components +title: Testando Componentes React --- -_The recommended testing framework is [Jest](https://jestjs.io/). This guide assumes that you followed the [Unit testing](/docs/unit-testing) guide to setup Jest._ +_O framework de teste recomendado é o [Jest](https://jestjs.io/). Este guia pressupõe que você seguiu o guia [Teste de Unidade](/docs/unit-testing) para configurar o Jest._ -The [@testing-library/react](https://github.com/testing-library/react-testing-library) by Kent C. Dodds has risen in popularity since its release and is a great replacement for [enzyme](https://github.com/airbnb/enzyme). You can write unit and integration tests and it encourages you to query the DOM in the same way the user would. Hence the guiding principle: +O [@testing-library/react](https://github.com/testing-library/react-testing-library) de Kent C. Dodds ganhou popularidade desde o seu lançamento e é um ótimo substituto para o [enzyme](https://github.com/airbnb/enzyme). Você pode escrever testes de unidade e integração e incentiva você a consultar o DOM da mesma maneira que o usuário faria. Daí o princípio orientador: -> The more your tests resemble the way your software is used, the more confidence they can give you. +> Quanto mais seus testes se assemelharem à maneira como seu software é usado, mais confiança eles podem oferecer. -It provides light utility functions on top of `react-dom` and `react-dom/test-utils` and gives you the confidence that refactors of your component in regards to the implementation (but not functionality) don't break your tests. +Ele fornece funções leves de utilidade em cima do `react-dom` e `react-dom/test-utils` e lhe dá a confiança de que as refatorações do seu componente em relação à implementação (mas não à funcionalidade) não quebrem seus testes. -## Installation +## Instalação -Install the library as one of your project's `devDependencies`. Optionally you may install `jest-dom` to use its [custom jest matchers](https://github.com/testing-library/jest-dom#custom-matchers). +Instale a biblioteca como uma das `devDependencies` do seu projeto. Opcionalmente, você pode instalar o `jest-dom` para usar seus [matchers personalizados do jest](https://github.com/testing-library/jest-dom#custom-matchers). ```shell npm install --save-dev @testing-library/react @testing-library/jest-dom ``` -Create the file `setup-test-env.js` at the root of your project. Insert this code into it: +Crie o arquivo `setup-test-env.js` na raiz do seu projeto. Insira este código nele: ```js:title=setup-test-env.js import "@testing-library/jest-dom/extend-expect" ``` -This file gets run automatically by Jest before every test and therefore you don't need to add the imports to every single test file. +Esse arquivo é executado automaticamente pelo Jest antes de cada teste e, portanto, você não precisa adicionar as importações a cada arquivo de teste. -Lastly you need to tell Jest where to find this file. Open your `jest.config.js` and add this entry to the bottom after 'setupFiles': +Por fim, você precisa informar ao Jest onde encontrar esse arquivo. Abra seu `jest.config.js` e adicione esta entrada na parte inferior após 'setupFiles': ```js:title=jest.config.js module.exports = { @@ -34,21 +34,21 @@ module.exports = { } ``` -## Usage +## Uso -Let's create a little example test using the newly added library. If you haven't done already read the [unit testing guide](/docs/unit-testing) — essentially you'll use `@testing-library/react` instead of `react-test-renderer` now. There are a lot of options when it comes to selectors, this example chooses `getByTestId` here. It also utilizes `toHaveTextContent` from `jest-dom`: +Vamos criar um pequeno exemplo de teste usando a biblioteca recém-adicionada. Se você ainda não leu o [guia de teste de unidade](/docs/unit-testing) — essencialmente você usará `@testing-library/react` em vez de `react-test-renderer` agora. Existem muitas opções quando se trata de seletores, este exemplo escolhe `getByTestId` aqui. Ele também utiliza `toHaveTextContent` do `jest-dom`: ```js import React from "react" import { render } from "@testing-library/react" -// You have to write data-testid -const Title = () =>