You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react/act.md
+14-15Lines changed: 14 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,21 +1,20 @@
1
1
---
2
-
title: act
2
+
title: React
3
3
---
4
-
5
4
<Intro>
6
5
7
-
`act` — это вспомогательная функция для тестирования, которая позволяет применить ожидающие обновления React перед выполнением утверждений.
6
+
`act` — это вспомогательная функция для тестирования, которая применяет ожидающие обновления React перед выполнением утверждений.
8
7
9
8
```js
10
9
awaitact(async actFn)
11
10
```
12
11
13
12
</Intro>
14
13
15
-
Чтобы подготовить компонент к утверждениям, оберните код, который его рендерит и выполняет обновления, внутри вызова`await act()`. Это позволит вашему тесту работать ближе к тому, как React функционирует в браузере.
14
+
Чтобы подготовить компонент к утверждениям, оберните код, который его отображает и выполняет обновления, в вызов`await act()`. Это позволит вашему тесту работать ближе к тому, как React работает в браузере.
16
15
17
16
<Note>
18
-
Вы можете найти использование `act()` напрямую немного многословным. Чтобы избежать некоторого шаблонного кода, вы можете использовать библиотеку, такую как [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), чьи вспомогательные функции обёрнуты в `act()`.
17
+
Вы можете найти использование `act()` напрямую немного избыточным. Чтобы избежать некоторого шаблонного кода, вы можете использовать библиотеку, такую как [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), вспомогательные функции которой обёрнуты в `act()`.
19
18
</Note>
20
19
21
20
@@ -42,7 +41,7 @@ it ('renders with button disabled', async () => {
42
41
43
42
<Note>
44
43
45
-
Мы рекомендуем использовать `act` с `await` и асинхронной функцией. Хотя синхронная версия работает во многих случаях, она не работает во всех, и из-за того, как React планирует обновления внутренне, трудно предсказать, когда вы можете использовать синхронную версию.
44
+
Мы рекомендуем использовать `act` с `await` и `async` функцией. Хотя синхронная версия работает во многих случаях, она не работает во всех, и из-за того, как React планирует обновления внутренне, трудно предсказать, когда вы можете использовать синхронную версию.
46
45
47
46
В будущем мы объявим синхронную версию устаревшей и удалим её.
48
47
@@ -52,7 +51,7 @@ it ('renders with button disabled', async () => {
52
51
53
52
*`async actFn`: Асинхронная функция, оборачивающая рендеринг или взаимодействия для тестируемых компонентов. Любые обновления, инициированные внутри `actFn`, добавляются во внутреннюю очередь `act`, которая затем обрабатывается вместе для обработки и применения любых изменений к DOM. Поскольку она асинхронна, React также будет выполнять любой код, который пересекает асинхронную границу, и обрабатывать любые запланированные обновления.
54
53
55
-
#### Возвращаемое значение {/*returns*/}
54
+
#### Возвращает {/*returns*/}
56
55
57
56
`act` ничего не возвращает.
58
57
@@ -86,7 +85,7 @@ function Counter() {
86
85
87
86
### Рендеринг компонентов в тестах {/*rendering-components-in-tests*/}
88
87
89
-
Чтобы протестировать вывод рендеринга компонента, оберните рендеринг внутри`act()`:
88
+
Чтобы протестировать вывод рендеринга компонента, оберните рендеринг в`act()`:
90
89
91
90
```js {10,12}
92
91
import {act} from'react';
@@ -97,7 +96,7 @@ it('can render and update a counter', async () => {
@@ -109,13 +108,13 @@ it('can render and update a counter', async () => {
109
108
});
110
109
```
111
110
112
-
Здесь мы создаём контейнер, добавляем его в документ и рендерим компонент `Counter` внутри `act()`. Это гарантирует, что компонент будет отрендерен и его эффекты будут применены перед выполнением утверждений.
111
+
Здесь мы создаём контейнер, добавляем его в документ и отображаем компонент `Counter` внутри `act()`. Это гарантирует, что компонент будет отображён и его эффекты будут применены перед выполнением утверждений.
113
112
114
-
Использование `act` гарантирует, что все обновления будут применены перед выполнением утверждений.
113
+
Использование `act` гарантирует, что все обновления были применены перед выполнением утверждений.
115
114
116
115
### Генерация событий в тестах {/*dispatching-events-in-tests*/}
117
116
118
-
Чтобы протестировать события, оберните генерацию события внутри`act()`:
117
+
Чтобы протестировать события, оберните генерацию события в`act()`:
119
118
120
119
```js {14,16}
121
120
import {act} from'react';
@@ -130,7 +129,7 @@ it.only('can render and update a counter', async () => {
@@ -142,7 +141,7 @@ it.only('can render and update a counter', async () => {
142
141
});
143
142
```
144
143
145
-
Здесь мы рендерим компонент с помощью `act`, а затем генерируем событие внутри другого `act()`. Это гарантирует, что все обновления от события будут применены перед выполнением утверждений.
144
+
Здесь мы отображаем компонент с помощью `act`, а затем генерируем событие внутри другого `act()`. Это гарантирует, что все обновления от события будут применены перед выполнением утверждений.
146
145
147
146
<Pitfall>
148
147
@@ -164,7 +163,7 @@ Warning: The current testing environment is not configured to support act(...)
164
163
165
164
</ConsoleBlock>
166
165
167
-
Чтобы исправить это, добавьте следующее в ваш файл глобальной настройки для React-тестов:
166
+
Чтобы исправить это, добавьте следующую строку в ваш файл глобальной настройки для React-тестов:
0 commit comments