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
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.
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()`.
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.
30
+
UI テストを書く際、レンダー、ユーザイベント、データフェッチなどのタスクは、ユーザインターフェースにおける「操作単位 (unit of interaction)」と捉えることができます。React は `act()`というヘルパを提供しており、これによりこれらの「操作単位」に関連するすべての更新が処理されて DOM に適用された後に、アサーションを行えるようになります。
31
31
32
-
The name `act`comes from the [Arrange-Act-Assert](https://wiki.c2.com/?ArrangeActAssert)pattern.
@@ -42,25 +42,25 @@ it ('renders with button disabled', async () => {
42
42
43
43
<Note>
44
44
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.
We will deprecate and remove the sync version in the future.
47
+
将来的には同期バージョンを非推奨にし、削除する予定です。
48
48
49
49
</Note>
50
50
51
-
#### Parameters {/*parameters*/}
51
+
#### 引数 {/*parameters*/}
52
52
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.
53
+
*`async actFn`: テスト対象のコンポーネントのレンダーやユーザ操作をラップする非同期関数。`actFn` 内でトリガされた更新は内部の act キューに追加され、その後まとめてフラッシュされて DOM に変更が適用されます。非同期であるため、React は非同期境界を越えるコードも実行し、スケジュールされた更新をフラッシュします。
54
54
55
-
#### Returns {/*returns*/}
55
+
#### 返り値 {/*returns*/}
56
56
57
-
`act`does not return anything.
57
+
`act`は何も返しません。
58
58
59
-
## Usage {/*usage*/}
59
+
## 使用法 {/*usage*/}
60
60
61
-
When testing a component, you can use `act`to make assertions about its output.
To test the render output of a component, wrap the render inside `act()`:
89
+
コンポーネントのレンダー出力内容をテストするには、レンダーを `act()` 内にラップします。
90
90
91
91
```js {10,12}
92
92
import {act} from'react';
@@ -109,13 +109,13 @@ it('can render and update a counter', async () => {
109
109
});
110
110
```
111
111
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.
To test events, wrap the event dispatch inside `act()`:
118
+
イベントをテストするには、イベントのディスパッチを `act()` 内にラップします。
119
119
120
120
```js {14,16}
121
121
import {act} from'react';
@@ -142,36 +142,36 @@ it.only('can render and update a counter', async () => {
142
142
});
143
143
```
144
144
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.
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.
149
+
DOM イベントをディスパッチできるのは、DOM コンテナがドキュメントに追加されている場合だけであることを忘れないようにしましょう。[React Testing Library](https://testing-library.com/docs/react-testing-library/intro)のようなライブラリを使用することでボイラープレートコードを減らすことができます。
150
150
151
151
</Pitfall>
152
152
153
-
## Troubleshooting {/*troubleshooting*/}
153
+
## トラブルシューティング {/*troubleshooting*/}
154
154
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*/}
155
+
### エラー："The current testing environment is not configured to support act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/}
156
156
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.
If you don't set the global, you will see an error like this:
159
+
このグローバル変数を設定しない場合、次のようなエラーが表示されます。
160
160
161
161
<ConsoleBlocklevel="error">
162
162
163
163
Warning: The current testing environment is not configured to support act(...)
164
164
165
165
</ConsoleBlock>
166
166
167
-
To fix, add this to your global setup file for React tests:
167
+
これを修正するには、React テストのグローバルセットアップファイルに次のコードを追加します。
168
168
169
169
```js
170
170
global.IS_REACT_ACT_ENVIRONMENT=true
171
171
```
172
172
173
173
<Note>
174
174
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.
0 commit comments