Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

translate: testing-react-components.md #74

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions docs/docs/testing-react-components.md
Original file line number Diff line number Diff line change
@@ -1,54 +1,54 @@
---
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 = {
setupFilesAfterEnv: ["<rootDir>/setup-test-env.js"],
}
```

## 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
junagao marked this conversation as resolved.
Show resolved Hide resolved
import React from "react"
import { render } from "@testing-library/react"

// You have to write data-testid
const Title = () => <h1 data-testid="hero-title">Gatsby is awesome!</h1>
// Você tem que escrever data-testid
const Title = () => <h1 data-testid="hero-title">Gatsby é incrível!</h1>

test("Displays the correct title", () => {
const { getByTestId } = render(<Title />)
// Assertion
expect(getByTestId("hero-title")).toHaveTextContent("Gatsby is awesome!")
// --> Test will pass
// Asserção
expect(getByTestId("hero-title")).toHaveTextContent("Gatsby é incrível!")
// --> Teste vai passar
})
```