Skip to content

Commit 74715d6

Browse files
Ryanhuihijiangtao
authored andcommitted
docs(cn): translate content/docs/addons-shallow-renderer.md into Chinese (#91)
1 parent 3dd9cfe commit 74715d6

File tree

2 files changed

+17
-17
lines changed

2 files changed

+17
-17
lines changed
Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
---
22
id: shallow-renderer
3-
title: Shallow Renderer
3+
title: 浅层渲染
44
permalink: docs/shallow-renderer.html
55
layout: docs
66
category: Reference
77
---
88

9-
**Importing**
9+
**如何引入**
1010

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

16-
## Overview {#overview}
16+
## 概览 {#overview}
1717

18-
When writing unit tests for React, shallow rendering can be helpful. Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.
18+
当为 React 编写单元测试时,浅层渲染十分有用。浅层渲染可以只渲染组件的“第一层”,并且对组件的 render 方法的返回值进行断言,不必担心子组件的行为,子组件并没有实例化或被渲染。并且浅层渲染不依赖 DOM
1919

20-
For example, if you have the following component:
20+
例如,如果你有如下的组件:
2121

2222
```javascript
2323
function MyComponent() {
@@ -30,12 +30,12 @@ function MyComponent() {
3030
}
3131
```
3232

33-
Then you can assert:
33+
你可以使用断言:
3434

3535
```javascript
3636
import ShallowRenderer from 'react-test-renderer/shallow';
3737

38-
// in your test:
38+
// 测试代码:
3939
const renderer = new ShallowRenderer();
4040
renderer.render(<MyComponent />);
4141
const result = renderer.getRenderOutput();
@@ -47,22 +47,22 @@ expect(result.props.children).toEqual([
4747
]);
4848
```
4949

50-
Shallow testing currently has some limitations, namely not supporting refs.
50+
浅层测试(Shallow testing)目前有些局限性,即不支持 refs
5151

52-
> Note:
52+
> 注意:
5353
>
54-
> We also recommend checking out Enzyme's [Shallow Rendering API](https://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality.
54+
> 建议你查阅 Enzyme[浅层渲染的 API](https://airbnb.io/enzyme/docs/api/shallow.html)。它在相同的功能基础上提供了更棒更高级的 API
5555
56-
## Reference {#reference}
56+
## 参考 {#reference}
5757

5858
### `shallowRenderer.render()` {#shallowrendererrender}
5959

60-
You can think of the shallowRenderer as a "place" to render the component you're testing, and from which you can extract the component's output.
60+
你可以把 shallowRenderer 看作用来渲染测试中组件的“容器”,且可以从容器中取到该组件的输出内容。
6161

62-
`shallowRenderer.render()` is similar to [`ReactDOM.render()`](/docs/react-dom.html#render) but it doesn't require DOM and only renders a single level deep. This means you can test components isolated from how their children are implemented.
62+
`shallowRenderer.render()` [`ReactDOM.render()`](/docs/react-dom.html#render) 很像,但是它不依赖 DOM 且只渲染一层。这意味着你可以对组件和其子组件的实现进行隔离测试。
6363

6464
### `shallowRenderer.getRenderOutput()` {#shallowrenderergetrenderoutput}
6565

66-
After `shallowRenderer.render()` has been called, you can use `shallowRenderer.getRenderOutput()` to get the shallowly rendered output.
66+
`shallowRenderer.render()` 被调用后,你可以使用 `shallowRenderer.getRenderOutput()` 来获取浅层渲染的输出内容。
6767

68-
You can then begin to assert facts about the output.
68+
然后,你就可以开始对输出内容进行断言操作。

content/docs/reference-javascript-environment-requirements.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ ReactDOM.render(
2323
);
2424
```
2525

26-
React 也依赖于 `requestAnimationFrame`(甚至包括测试环境)。
27-
你可以使用 [raf](https://www.npmjs.com/package/raf) package 增添 `requestAnimationFrame`
26+
React 同时还依赖于 `requestAnimationFrame`(甚至包括测试环境)。
27+
你可以使用 [raf](https://www.npmjs.com/package/raf) package 增添 `requestAnimationFrame` 的 shim
2828

2929
```js
3030
import 'raf/polyfill';

0 commit comments

Comments
 (0)