From e4b45ea606fa3c3a310ee4f88698c6fb89ee1f31 Mon Sep 17 00:00:00 2001 From: Juliane Nagao Date: Tue, 26 Nov 2019 22:13:20 +0100 Subject: [PATCH 1/4] translate testing-react-components.md --- docs/docs/testing-react-components.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/docs/testing-react-components.md b/docs/docs/testing-react-components.md index a0d096e70..5fd61f025 100644 --- a/docs/docs/testing-react-components.md +++ b/docs/docs/testing-react-components.md @@ -2,31 +2,31 @@ title: Testing React Components --- -_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 os refatores 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,9 +34,9 @@ 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][unit testing guide](/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" From 5192fbb9bbd7761533e45ddeb53ff928d743c384 Mon Sep 17 00:00:00 2001 From: Juliane Nagao Date: Wed, 27 Nov 2019 10:24:37 +0100 Subject: [PATCH 2/4] update testing-react-components.md translation --- docs/docs/testing-react-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/testing-react-components.md b/docs/docs/testing-react-components.md index 5fd61f025..b6da2f7e3 100644 --- a/docs/docs/testing-react-components.md +++ b/docs/docs/testing-react-components.md @@ -8,11 +8,11 @@ O [@testing-library/react](https://github.com/testing-library/react-testing-libr > Quanto mais seus testes se assemelharem à maneira como seu software é usado, mais confiança eles podem oferecer. -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 os refatores do seu componente em relação à implementação (mas não à funcionalidade) não quebrem seus testes. +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. ## Instalação -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).. +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 From 5831669118ae4915098ce1444b228014bc52aa9e Mon Sep 17 00:00:00 2001 From: Juliane Nagao Date: Wed, 27 Nov 2019 23:25:53 +0100 Subject: [PATCH 3/4] update testing-react-components.md translation --- docs/docs/testing-react-components.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/testing-react-components.md b/docs/docs/testing-react-components.md index b6da2f7e3..a8ab863f4 100644 --- a/docs/docs/testing-react-components.md +++ b/docs/docs/testing-react-components.md @@ -1,5 +1,5 @@ --- -title: Testing React Components +title: Testando Componentes React --- _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._ @@ -43,12 +43,12 @@ import React from "react" import { render } from "@testing-library/react" // You have to write data-testid -const Title = () =>

Gatsby is awesome!

+const Title = () =>

Gatsby é incrível!

test("Displays the correct title", () => { const { getByTestId } = render() // Assertion - expect(getByTestId("hero-title")).toHaveTextContent("Gatsby is awesome!") + expect(getByTestId("hero-title")).toHaveTextContent("Gatsby é incrível!") // --> Test will pass }) ``` From 7c7a09fbfdc2c855d9dafabe091dc19e682a3d2a Mon Sep 17 00:00:00 2001 From: Juliane Nagao <julianens@gmail.com> Date: Thu, 28 Nov 2019 09:28:46 +0100 Subject: [PATCH 4/4] update testing-react-components translation to pt-br --- docs/docs/testing-react-components.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/docs/testing-react-components.md b/docs/docs/testing-react-components.md index a8ab863f4..4a41fb42f 100644 --- a/docs/docs/testing-react-components.md +++ b/docs/docs/testing-react-components.md @@ -36,19 +36,19 @@ module.exports = { ## Uso -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][unit testing guide](/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`: +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 +// 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 + // Asserção expect(getByTestId("hero-title")).toHaveTextContent("Gatsby é incrível!") - // --> Test will pass + // --> Teste vai passar }) ```