Skip to content

Commit b118a2a

Browse files
authored
Merge pull request #11 from queq1890/test-renderer
Translate reference-test-renderer
2 parents ce556dd + 692ad0e commit b118a2a

File tree

1 file changed

+28
-30
lines changed

1 file changed

+28
-30
lines changed

content/docs/reference-test-renderer.md

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,20 @@ layout: docs
66
category: Reference
77
---
88

9-
**Importing**
9+
**インポート**
1010

1111
```javascript
1212
import TestRenderer from 'react-test-renderer'; // ES6
1313
const TestRenderer = require('react-test-renderer'); // ES5 with npm
1414
```
1515

16-
## Overview
16+
## 概要
1717

18-
This package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.
18+
このパッケージは、DOM やネイティブのモバイル環境に依存せずに React コンポーネントをピュアな JavaScript オブジェクトにレンダーすることができる React レンダラを提供します。
1919

20-
Essentially, this package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a React DOM or React Native component without using a browser or [jsdom](https://github.com/tmpvar/jsdom).
20+
本質的にこのパッケージは、ブラウザや [jsdom](https://github.com/tmpvar/jsdom) を利用しなくても、React DOM や React Native コンポーネントがレンダーする(DOM ツリーに似た)ビューの階層構造のスナップショットを容易に取得できるようにするためのものです。
2121

22-
Example:
22+
例:
2323

2424
```javascript
2525
import TestRenderer from 'react-test-renderer';
@@ -38,9 +38,9 @@ console.log(testRenderer.toJSON());
3838
// children: [ 'Facebook' ] }
3939
```
4040

41-
You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: [Learn more about it](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
41+
JSON ツリーを自動的にファイルに保存し、変更が起こったかをテストで確認するには、Jest のスナップショットテスト機能が利用できます。[詳細について知る](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html)
4242

43-
You can also traverse the output to find specific nodes and make assertions about them.
43+
出力を走査して特定のノードを検索し、それらに対してアサーションを行うこともできます。
4444

4545
```javascript
4646
import TestRenderer from 'react-test-renderer';
@@ -94,157 +94,155 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
9494
* [`testInstance.parent`](#testinstanceparent)
9595
* [`testInstance.children`](#testinstancechildren)
9696

97-
## Reference
97+
## リファレンス
9898

9999
### `TestRenderer.create()`
100100

101101
```javascript
102102
TestRenderer.create(element, options);
103103
```
104104

105-
Create a `TestRenderer` instance with the passed React element. It doesn't use the real DOM, but it still fully renders the component tree into memory so you can make assertions about it. The returned instance has the following methods and properties.
105+
渡された React 要素から `TestRenderer` インスタンスを作成します。実際の DOM は使用しませんが、コンポーネントを完全な形でメモリにレンダーするので、アサーションを行うことができます。返されたインスタンスは、次のメソッドとプロパティを持ちます。
106106

107107
### `testRenderer.toJSON()`
108108

109109
```javascript
110110
testRenderer.toJSON()
111111
```
112112

113-
Return an object representing the rendered tree. This tree only contains the platform-specific nodes like `<div>` or `<View>` and their props, but doesn't contain any user-written components. This is handy for [snapshot testing](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
113+
レンダーされたツリーを表すオブジェクトを返します。このツリーは `<div>` もしくは `<View>` のようなプラットフォーム固有のノードとそのプロパティを含みますが、ユーザー定義のコンポーネントは含まれません。[スナップショットテスト](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest)に便利です。
114114

115115
### `testRenderer.toTree()`
116116

117117
```javascript
118118
testRenderer.toTree()
119119
```
120120

121-
Return an object representing the rendered tree. Unlike `toJSON()`, the representation is more detailed than the one provided by `toJSON()`, and includes the user-written components. You probably don't need this method unless you're writing your own assertion library on top of the test renderer.
121+
レンダーされたツリーを表すオブジェクトを返します。`toJSON()` とは異なり、このツリーはより詳細なものであり、ユーザー定義のコンポーネントも含んでいます。テストレンダラを利用して自作のアサーションライブラリを作成している場合以外は、恐らくこのメソッドが必要となることはないでしょう。
122122

123123
### `testRenderer.update()`
124124

125125
```javascript
126126
testRenderer.update(element)
127127
```
128128

129-
Re-render the in-memory tree with a new root element. This simulates a React update at the root. If the new element has the same type and key as the previous element, the tree will be updated; otherwise, it will re-mount a new tree.
129+
メモリ上のツリーを新規のルート要素で再レンダーします。ルートでの React の更新をシミュレートします。新しい要素が以前の要素と同じ型と key を持つ場合は、ツリーは更新されます。それ以外の場合は新しいツリーを再マウントします。
130130

131131
### `testRenderer.unmount()`
132132

133133
```javascript
134134
testRenderer.unmount()
135135
```
136136

137-
Unmount the in-memory tree, triggering the appropriate lifecycle events.
137+
メモリ上のツリーをアンマウントし、適切なライフサイクルイベントを発生させます。
138138

139139
### `testRenderer.getInstance()`
140140

141141
```javascript
142142
testRenderer.getInstance()
143143
```
144144

145-
Return the instance corresponding to the root element, if available. This will not work if the root element is a function component because they don't have instances.
145+
ルート要素に対応したインスタンスがある場合はそれを返します。関数コンポーネントはインスタンスを持たないため、ルート要素が関数コンポーネントの場合、このメソッドはうまく動作しません。
146146

147147
### `testRenderer.root`
148148

149149
```javascript
150150
testRenderer.root
151151
```
152152

153-
Returns the root "test instance" object that is useful for making assertions about specific nodes in the tree. You can use it to find other "test instances" deeper below.
153+
ツリー上の特定のノードに対してアサーションを行う際に役立つ、ルート「テストインスタンス」を返します。これは、配下の他の「テストインスタンス」を検索する際に使用することができます。
154154

155155
### `testInstance.find()`
156156

157157
```javascript
158158
testInstance.find(test)
159159
```
160160

161-
Find a single descendant test instance for which `test(testInstance)` returns `true`. If `test(testInstance)` does not return `true` for exactly one test instance, it will throw an error.
161+
`test(testInstance)` `true` を返す単一の子テストインスタンスを検索します。もし `test(testInstance)` に対して `true` を返すテストインスタンスの数がちょうど 1 でない場合は、エラーがスローされます。
162162

163163
### `testInstance.findByType()`
164164

165165
```javascript
166166
testInstance.findByType(type)
167167
```
168168

169-
Find a single descendant test instance with the provided `type`. If there is not exactly one test instance with the provided `type`, it will throw an error.
169+
与えられた `type` を持つ単一の子テストインスタンスを検索します。もし与えられた `type` を持つテストインスタンスの数がちょうど 1 でない場合、エラーがスローされます。
170170

171171
### `testInstance.findByProps()`
172172

173173
```javascript
174174
testInstance.findByProps(props)
175175
```
176176

177-
Find a single descendant test instance with the provided `props`. If there is not exactly one test instance with the provided `props`, it will throw an error.
177+
与えられた `props` を持つ単一の子テストインスタンスを検索します。もし与えられた `props` を持つテストインスタンスの数がちょうど 1 でない場合、エラーがスローされます。
178178

179179
### `testInstance.findAll()`
180180

181181
```javascript
182182
testInstance.findAll(test)
183183
```
184184

185-
Find all descendant test instances for which `test(testInstance)` returns `true`.
185+
`test(testInstance)` `true` を返す全ての子テストインスタンスを検索します。
186186

187187
### `testInstance.findAllByType()`
188188

189189
```javascript
190190
testInstance.findAllByType(type)
191191
```
192192

193-
Find all descendant test instances with the provided `type`.
193+
与えられた `type` を持つ全ての子テストインスタンスを検索します。
194194

195195
### `testInstance.findAllByProps()`
196196

197197
```javascript
198198
testInstance.findAllByProps(props)
199199
```
200200

201-
Find all descendant test instances with the provided `props`.
201+
与えられた `props` を持つ全ての子テストインスタンスを検索します。
202202

203203
### `testInstance.instance`
204204

205205
```javascript
206206
testInstance.instance
207207
```
208208

209-
The component instance corresponding to this test instance. It is only available for class components, as function components don't have instances. It matches the `this` value inside the given component.
209+
当該テストインスタンスに対応するコンポーネントのインスタンスです。関数コンポーネントはインスタンスを持たないため、クラスコンポーネントでのみ使用することができます。与えられたコンポーネント内での `this` の値と一致します。
210210

211211
### `testInstance.type`
212212

213213
```javascript
214214
testInstance.type
215215
```
216216

217-
The component type corresponding to this test instance. For example, a `<Button />` component has a type of `Button`.
217+
当該テストインスタンスに対応するコンポーネントの型です。例えば、`<Button />` コンポーネントは `Button` 型を持っています。
218218

219219
### `testInstance.props`
220220

221221
```javascript
222222
testInstance.props
223223
```
224224

225-
The props corresponding to this test instance. For example, a `<Button size="small" />` component has `{size: 'small'}` as props.
225+
当該テストインスタンスに対応するコンポーネントの props です。例えば、`<Button size="small" />` コンポーネントは `{size: 'small'}` props として持っています。
226226

227227
### `testInstance.parent`
228228

229229
```javascript
230230
testInstance.parent
231231
```
232232

233-
The parent test instance of this test instance.
233+
当該テストインスタンスの親テストインスタンスです。
234234

235235
### `testInstance.children`
236236

237237
```javascript
238238
testInstance.children
239239
```
240240

241-
The children test instances of this test instance.
241+
当該テストインスタンスの子テストインスタンスです。
242242

243-
## Ideas
243+
## 使い方の一例
244244

245-
You can pass `createNodeMock` function to `TestRenderer.create` as the option, which allows for custom mock refs.
246-
`createNodeMock` accepts the current element and should return a mock ref object.
247-
This is useful when you test a component that relies on refs.
245+
オプションとして `createNodeMock` 関数を `TestRenderer.create` に渡すことで、独自のモック refs を作成することができます。`createNodeMock` は現在の要素を受け取り、モックの ref オブジェクトを返す必要があります。refs に依存したコンポーネントのテストに便利です。
248246

249247
```javascript
250248
import TestRenderer from 'react-test-renderer';

0 commit comments

Comments
 (0)