diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index bbbf5755c..103d794a3 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -1,27 +1,27 @@ --- id: test-utils -title: Test Utilities +title: Utilitários de Teste permalink: docs/test-utils.html layout: docs category: Reference --- -**Importing** +**Importando** ```javascript import ReactTestUtils from 'react-dom/test-utils'; // ES6 -var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm +var ReactTestUtils = require('react-dom/test-utils'); // ES5 com npm ``` -## Overview {#overview} +## Visão Geral {#overview} -`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). +`ReactTestUtils` torna fácil para testar componentes em React utilizando framework de teste à sua escolha. No Facebook, nós utilizamos [Jest](https://facebook.github.io/jest/) para testar Javascript sem dores. Aprenda como utilizar o Jest através do website do Jest [Tutorial para React](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). -> Note: +> Nota: > -> We recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to enable and encourage writing tests that use your components as the end users do. +> Nós recomendamos usar [`react-testing-library`](https://git.io/react-testing-library) que é projetado para permitir e encorajar escrita de testes que utilizam seus componentes como os usuários finais utilizarão. > -> Alternatively, Airbnb has released a testing utility called [Enzyme](http://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output. +> Alternativamente, Airbnb lançou um utilitário de teste chamado [Enzyme](http://airbnb.io/enzyme/), que torna fácil para afirmar, manipular e cruzar a saída dos seus componentes React. - [`act()`](#act) - [`mockComponent()`](#mockcomponent) @@ -40,17 +40,17 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm - [`renderIntoDocument()`](#renderintodocument) - [`Simulate`](#simulate) -## Reference {#reference} +## Referência {#reference} ### `act()` {#act} -To prepare a component for assertions, wrap the code rendering it and performing updates inside an `act()` call. This makes your test run closer to how React works in the browser. +Para preparar um componente para determinações, coloque o código de renderização e de atualizações dentro de uma chamada `act()`. Isso faz com que o teste rode mais próximo de como React funciona no browser. ->Note +>Nota: > ->If you use `react-test-renderer`, it also provides an `act` export that behaves the same way. +>Se você usa `react-test-renderer`, ele provê um exportador de `act` que se comporta da mesma maneira. -For example, let's say we have this `Counter` component: +Por exemplo, vamos dizer que nós temos esse componente `Counter`: ```js class App extends React.Component { @@ -60,10 +60,10 @@ class App extends React.Component { this.handleClick = this.handleClick.bind(this); } componentDidMount() { - document.title = `You clicked ${this.state.count} times`; + document.title = `Você clicou ${this.state.count} vezes`; } componentDidUpdate() { - document.title = `You clicked ${this.state.count} times`; + document.title = `Você clicou ${this.state.count} vezes`; } handleClick() { this.setState(state => ({ @@ -73,9 +73,9 @@ class App extends React.Component { render() { return (
You clicked {this.state.count} times
+Você clicou {this.state.count} vezes