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
var ReactTestUtils =require('react-dom/test-utils'); // ES5 with npm
14
14
```
15
15
16
-
## Overview {#overview}
16
+
## 概要 {#overview}
17
17
18
-
`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](https://jestjs.io/docs/tutorial-react).
> 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.
> Alternatively, Airbnb has released a testing utility called [Enzyme](https://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.
@@ -44,13 +44,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
44
44
45
45
### `act()` {#act}
46
46
47
-
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.
For example, let's say we have this `Counter`component:
53
+
例えば、次のような `Counter`コンポーネントがあるとしましょう：
54
54
55
55
```js
56
56
classAppextendsReact.Component {
@@ -83,7 +83,7 @@ class App extends React.Component {
83
83
}
84
84
```
85
85
86
-
Here is how we can test it:
86
+
これをテストするには次のように書きます：
87
87
88
88
```js{3,20-22,29-31}
89
89
import React from 'react';
@@ -122,7 +122,7 @@ it('can render and update a counter', () => {
122
122
});
123
123
```
124
124
125
-
Don't forget that dispatching DOM events only works when the DOM container is added to the `document`. You can use a helper like [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) to reduce the boilerplate code.
125
+
DOM イベントのディスパッチは、DOM コンテナが `document` に追加されたときだけ動作することを忘れないでください。[`react-testing-library`]（https://github.com/kentcdodds/react-testing-library） のようなヘルパーを使えばボイラープレートのコードを減らせます。
126
126
127
127
* * *
128
128
@@ -135,11 +135,11 @@ mockComponent(
135
135
)
136
136
```
137
137
138
-
Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple `<div>` (or other tag if `mockTagName`is provided) containing any provided children.
> `mockComponent()`is a legacy API. We recommend using [shallow rendering](/docs/shallow-renderer.html) or[`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock)instead.
142
+
> `mockComponent()`はレガシーな API です。その代わりとして [shallow rendering](/docs/test-utils.html#shallow-rendering) や[`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock)の使用をおすすめします。
143
143
144
144
* * *
145
145
@@ -149,7 +149,7 @@ Pass a mocked component module to this method to augment it with useful methods
149
149
isElement(element)
150
150
```
151
151
152
-
Returns `true` if `element`is any React element.
152
+
`element`が任意の React 要素である場合 `true` を返します。
153
153
154
154
* * *
155
155
@@ -162,7 +162,7 @@ isElementOfType(
162
162
)
163
163
```
164
164
165
-
Returns `true` if `element` is a React element whose type is of a React `componentClass`.
Traverse all components in `tree`and accumulate all components where `test(component)`is`true`. This is not that useful on its own, but it's used as a primitive for other test utils.
Like [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass)but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
Like [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag)but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
Same as [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype)but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one.
@@ -296,20 +296,19 @@ Same as [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) bu
296
296
renderIntoDocument(element)
297
297
```
298
298
299
-
Render a React element into a detached DOM node in the document. **This function requires a DOM.** It is effectively equivalent to:
299
+
React 要素をドキュメントから切り離された DOM ノードにレンダーします。**この関数を実行するには DOM が必要です。**これは以下のコードと実質的に等価です：
300
300
301
301
```js
302
302
constdomContainer=document.createElement('div');
303
303
ReactDOM.render(element, domContainer);
304
304
```
305
305
306
-
> Note:
306
+
> 補足:
307
307
>
308
-
> You will need to have `window`, `window.document` and `window.document.createElement` globally available **before** you import `React`. Otherwise React will think it can't access the DOM and methods like `setState` won't work.
> You will have to provide any event property that you're using in your component (e.g. keyCode, which, etc...) as React is not creating any of these for you.
0 commit comments