Skip to content

Commit 03ffc0b

Browse files
Translate act.md to Portuguese (#1042)
1 parent e69e5c7 commit 03ffc0b

File tree

1 file changed

+30
-31
lines changed
  • src/content/reference/react

1 file changed

+30
-31
lines changed

src/content/reference/react/act.md

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,31 @@ title: act
44

55
<Intro>
66

7-
`act` is a test helper to apply pending React updates before making assertions.
7+
`act` é um auxiliar de teste para aplicar atualizações React pendentes antes de fazer asserções.
88

99
```js
1010
await act(async actFn)
1111
```
1212

1313
</Intro>
1414

15-
To prepare a component for assertions, wrap the code rendering it and performing updates inside an `await act()` call. This makes your test run closer to how React works in the browser.
15+
Para preparar um componente para as asserções, encapsule o código que o renderiza e executa atualizações dentro de uma chamada `await act()`. Isso faz com que seu teste seja executado mais próximo de como o React funciona no navegador.
1616

1717
<Note>
18-
You might find using `act()` directly a bit too verbose. To avoid some of the boilerplate, you could use a library like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), whose helpers are wrapped with `act()`.
18+
Você pode achar o uso direto de `act()` um pouco verboso demais. Para evitar alguma repetição de código, você pode usar uma biblioteca como [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), cujos auxiliares são encapsulados com `act()`.
1919
</Note>
2020

21-
2221
<InlineToc />
2322

2423
---
2524

26-
## Reference {/*reference*/}
25+
## Referência {/*reference*/}
2726

2827
### `await act(async actFn)` {/*await-act-async-actfn*/}
2928

30-
When writing UI tests, tasks like rendering, user events, or data fetching can be considered as “units” of interaction with a user interface. React provides a helper called `act()` that makes sure all updates related to these “units” have been processed and applied to the DOM before you make any assertions.
29+
Ao escrever testes de UI, tarefas como renderização, eventos de usuário ou busca de dados podem ser consideradas como “unidades” de interação com uma interface do usuário. O React fornece um auxiliar chamado `act()` que garante que todas as atualizações relacionadas a essas “unidades” tenham sido processadas e aplicadas ao DOM antes de você fazer qualquer asserção.
3130

32-
The name `act` comes from the [Arrange-Act-Assert](https://wiki.c2.com/?ArrangeActAssert) pattern.
31+
O nome `act` vem do padrão [Arrange-Act-Assert](https://wiki.c2.com/?ArrangeActAssert).
3332

3433
```js {2,4}
3534
it ('renders with button disabled', async () => {
@@ -42,25 +41,25 @@ it ('renders with button disabled', async () => {
4241

4342
<Note>
4443

45-
We recommend using `act` with `await` and an `async` function. Although the sync version works in many cases, it doesn't work in all cases and due to the way React schedules updates internally, it's difficult to predict when you can use the sync version.
44+
Recomendamos o uso de `act` com `await` e uma função `async`. Embora a versão síncrona funcione em muitos casos, ela não funciona em todos os casos e, devido à forma como o React agenda as atualizações internamente, é difícil prever quando você pode usar a versão síncrona.
4645

47-
We will deprecate and remove the sync version in the future.
46+
Vamos descontinuar e remover a versão síncrona no futuro.
4847

4948
</Note>
5049

51-
#### Parameters {/*parameters*/}
50+
#### Parâmetros {/*parameters*/}
5251

53-
* `async actFn`: An async function wrapping renders or interactions for components being tested. Any updates triggered within the `actFn`, are added to an internal act queue, which are then flushed together to process and apply any changes to the DOM. Since it is async, React will also run any code that crosses an async boundary, and flush any updates scheduled.
52+
* `async actFn`: Uma função assíncrona que encapsula renderizações ou interações para os componentes que estão sendo testados. Quaisquer atualizações acionadas dentro de `actFn` são adicionadas a uma fila `act` interna, que é então esvaziada em conjunto para processar e aplicar quaisquer alterações ao DOM. Como é assíncrono, o React também executará qualquer código que cruze uma fronteira assíncrona e esvaziará quaisquer atualizações agendadas.
5453

55-
#### Returns {/*returns*/}
54+
#### Retorna {/*returns*/}
5655

57-
`act` does not return anything.
56+
`act` não retorna nada.
5857

59-
## Usage {/*usage*/}
58+
## Uso {/*usage*/}
6059

61-
When testing a component, you can use `act` to make assertions about its output.
60+
Ao testar um componente, você pode usar `act` para fazer asserções sobre sua saída.
6261

63-
For example, let’s say we have this `Counter` component, the usage examples below show how to test it:
62+
Por exemplo, digamos que temos este componente `Counter`, os exemplos de uso abaixo mostram como testá-lo:
6463

6564
```js
6665
function Counter() {
@@ -84,9 +83,9 @@ function Counter() {
8483
}
8584
```
8685

87-
### Rendering components in tests {/*rendering-components-in-tests*/}
86+
### Renderizando componentes em testes {/*rendering-components-in-tests*/}
8887

89-
To test the render output of a component, wrap the render inside `act()`:
88+
Para testar a saída da renderização de um componente, encapsule a renderização dentro de `act()`:
9089

9190
```js {10,12}
9291
import {act} from 'react';
@@ -109,13 +108,13 @@ it('can render and update a counter', async () => {
109108
});
110109
```
111110

112-
Here, we create a container, append it to the document, and render the `Counter` component inside `act()`. This ensures that the component is rendered and its effects are applied before making assertions.
111+
Aqui, criamos um contêiner, o anexamos ao documento e renderizamos o componente `Counter` dentro de `act()`. Isso garante que o componente seja renderizado e seus efeitos sejam aplicados antes de fazer as asserções.
113112

114-
Using `act` ensures that all updates have been applied before we make assertions.
113+
O uso de `act` garante que todas as atualizações foram aplicadas antes de fazermos as asserções.
115114

116-
### Dispatching events in tests {/*dispatching-events-in-tests*/}
115+
### Enviando eventos em testes {/*dispatching-events-in-tests*/}
117116

118-
To test events, wrap the event dispatch inside `act()`:
117+
Para testar eventos, encapsule o envio do evento dentro de `act()`:
119118

120119
```js {14,16}
121120
import {act} from 'react';
@@ -142,36 +141,36 @@ it.only('can render and update a counter', async () => {
142141
});
143142
```
144143

145-
Here, we render the component with `act`, and then dispatch the event inside another `act()`. This ensures that all updates from the event are applied before making assertions.
144+
Aqui, renderizamos o componente com `act` e, em seguida, enviamos o evento dentro de outro `act()`. Isso garante que todas as atualizações do evento sejam aplicadas antes de fazer as asserções.
146145

147146
<Pitfall>
148147

149-
Don’t forget that dispatching DOM events only works when the DOM container is added to the document. You can use a library like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to reduce the boilerplate code.
148+
Não se esqueça de que o envio de eventos DOM só funciona quando o contêiner do DOM é adicionado ao documento. Você pode usar uma biblioteca como [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) para reduzir a repetição de código.
150149

151150
</Pitfall>
152151

153-
## Troubleshooting {/*troubleshooting*/}
152+
## Solução de problemas {/*troubleshooting*/}
154153

155-
### I'm getting an error: "The current testing environment is not configured to support act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/}
154+
### Estou recebendo um erro: "O ambiente de teste atual não está configurado para oferecer suporte a act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/}
156155

157-
Using `act` requires setting `global.IS_REACT_ACT_ENVIRONMENT=true` in your test environment. This is to ensure that `act` is only used in the correct environment.
156+
O uso de `act` requer a configuração de `global.IS_REACT_ACT_ENVIRONMENT=true` no seu ambiente de teste. Isso garante que `act` seja usado apenas no ambiente correto.
158157

159-
If you don't set the global, you will see an error like this:
158+
Se você não definir o global, verá um erro como este:
160159

161160
<ConsoleBlock level="error">
162161

163162
Warning: The current testing environment is not configured to support act(...)
164163

165164
</ConsoleBlock>
166165

167-
To fix, add this to your global setup file for React tests:
166+
Para corrigir, adicione isso ao seu arquivo de configuração global para testes do React:
168167

169168
```js
170169
global.IS_REACT_ACT_ENVIRONMENT=true
171170
```
172171

173172
<Note>
174173

175-
In testing frameworks like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), `IS_REACT_ACT_ENVIRONMENT` is already set for you.
174+
Em frameworks de teste como [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), `IS_REACT_ACT_ENVIRONMENT` já está configurado para você.
176175

177-
</Note>
176+
</Note>

0 commit comments

Comments
 (0)