Skip to content

Commit c7ec74d

Browse files
committed
add test renderer chinese translation
1 parent 259ebfd commit c7ec74d

File tree

1 file changed

+29
-31
lines changed

1 file changed

+29
-31
lines changed

content/docs/reference-test-renderer.md

+29-31
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 {#overview}
16+
## 概览 {#overview}
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+
这个 package 提供了一个 React 渲染器,可以用来将 React 组件渲染成纯 JavaScript 对象, 无需依赖 DOM 或原生移动环境。
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+
本质上, 这个 package 无需利用浏览器或 [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+
你可以使用 Jest 的快照测试来自动保存一个该 `JSON` 树文件的副本,并在你的测试中检查它是否被更改:[了解更多](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 {#reference}
97+
## 参考 {#reference}
9898

9999
### `TestRenderer.create()` {#testrenderercreate}
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()` {#testrenderertojson}
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>` 和他们的 props,但并不包含任何用户编写的组件。这对于[快照测试](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest)非常方便。
114114

115115
### `testRenderer.toTree()` {#testrenderertotree}
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()` 不同,它表示的内容比 `toJSON()` 提供的内容要更加详细,并且包含用户编写的组件。除非你要在测试渲染器(test renderer)之上编写自己的断言库,否则你可能并不需要这个方法。
122122

123123
### `testRenderer.update()` {#testrendererupdate}
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更新。如果新的元素和之前的元素有相同的 type key,该树将会被更新;否则,它将重挂载一个新树。
130130

131131
### `testRenderer.unmount()` {#testrendererunmount}
132132

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

137-
Unmount the in-memory tree, triggering the appropriate lifecycle events.
137+
卸载内存中的树,触发相应的生命周期事件。
138138

139139
### `testRenderer.getInstance()` {#testrenderergetinstance}
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` {#testrendererroot}
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()` {#testinstancefind}
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`,将会报错。
162162

163163
### `testInstance.findByType()` {#testinstancefindbytype}
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`,将会报错。
170170

171171
### `testInstance.findByProps()` {#testinstancefindbyprops}
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`,将会报错。
178178

179179
### `testInstance.findAll()` {#testinstancefindall}
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()` {#testinstancefindallbytype}
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()` {#testinstancefindallbyprops}
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` {#testinstanceinstance}
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` {#testinstancetype}
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` {#testinstanceprops}
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" />` 组件的 props 为 `{size: 'small'}`
226226

227227
### `testInstance.parent` {#testinstanceparent}
228228

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

233-
The parent test instance of this test instance.
233+
该测试实例的父测试实例。
234234

235235
### `testInstance.children` {#testinstancechildren}
236236

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

241-
The children test instances of this test instance.
241+
该测试实例的子测试实例。
242242

243-
## Ideas {#ideas}
243+
## 意见 {#ideas}
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` 函数作为选项(option)传递给 `TestRenderer.create`,可以自行模拟 refs。`createNodeMock` 接受当前元素作为参数,并且返回一个模拟 ref 对象的。这十分有利于测试依赖于 refs 的组件。
248246

249247
```javascript
250248
import TestRenderer from 'react-test-renderer';
@@ -268,7 +266,7 @@ TestRenderer.create(
268266
{
269267
createNodeMock: (element) => {
270268
if (element.type === 'input') {
271-
// mock a focus function
269+
// 模拟 focus 函数
272270
return {
273271
focus: () => {
274272
focused = true;

0 commit comments

Comments
 (0)