-
Notifications
You must be signed in to change notification settings - Fork 1.1k
docs(cn): translate content/docs/addons-shallow-renderer.md into Chinese #91
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 3 commits
dd787e1
9e16d17
c173096
5661c0b
e6c7b28
2f53dbf
640d38f
e7f64ac
8b7489b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,23 +1,23 @@ | ||||||
--- | ||||||
id: shallow-renderer | ||||||
title: Shallow Renderer | ||||||
title: 浅层渲染 | ||||||
permalink: docs/shallow-renderer.html | ||||||
layout: docs | ||||||
category: Reference | ||||||
--- | ||||||
|
||||||
**Importing** | ||||||
**如何引入** | ||||||
|
||||||
```javascript | ||||||
import ShallowRenderer from 'react-test-renderer/shallow'; // ES6 | ||||||
var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm | ||||||
``` | ||||||
|
||||||
## Overview {#overview} | ||||||
## 概述 {#overview} | ||||||
|
||||||
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. | ||||||
当为 React 写单元测试时,浅层渲染十分有用。浅层渲染可以使你只渲染一个组件的“第一层”,并且对组件的 render 方法的返回值进行断言,不用担心子组件的行为,子组件并没有实例化或被渲染。并且浅层渲染不需要 DOM。 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
For example, if you have the following component: | ||||||
例如,如果你有如下的组件: | ||||||
|
||||||
```javascript | ||||||
function MyComponent() { | ||||||
|
@@ -30,12 +30,12 @@ function MyComponent() { | |||||
} | ||||||
``` | ||||||
|
||||||
Then you can assert: | ||||||
你可以断言(assert): | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
```javascript | ||||||
import ShallowRenderer from 'react-test-renderer/shallow'; | ||||||
|
||||||
// in your test: | ||||||
// 在你的测试中: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
const renderer = new ShallowRenderer(); | ||||||
renderer.render(<MyComponent />); | ||||||
const result = renderer.getRenderOutput(); | ||||||
|
@@ -47,22 +47,22 @@ expect(result.props.children).toEqual([ | |||||
]); | ||||||
``` | ||||||
|
||||||
Shallow testing currently has some limitations, namely not supporting refs. | ||||||
浅层测试(Shallow testing)当前还有一些局限,即不支持 refs。 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
> Note: | ||||||
> 注意: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 全角标点
Suggested change
|
||||||
> | ||||||
> We also recommend checking out Enzyme's [Shallow Rendering API](http://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality. | ||||||
> 我们还建议你看看 Enzyme 的 [Shallow Rendering API](http://airbnb.io/enzyme/docs/api/shallow.html)。它在相同的功能上提供了一个更棒的高级 API。 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
## Reference {#reference} | ||||||
## 参考 {#reference} | ||||||
|
||||||
### `shallowRenderer.render()` {#shallowrendererrender} | ||||||
|
||||||
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. | ||||||
你可以把 shallowRenderer 看作一个用来渲染你正在测试的组件的“地方”,并且你可以从那里取到该组件的输出。 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
`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. | ||||||
`shallowRenderer.render()` 和 [`ReactDOM.render()`](/docs/react-dom.html#render) 很像,但是它不需要 DOM 并且只渲染一层。 这意味着你可以只测试组件,不必担心它的子组件是如何实现的。 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
或者,这里需要直译吗? |
||||||
|
||||||
### `shallowRenderer.getRenderOutput()` {#shallowrenderergetrenderoutput} | ||||||
|
||||||
After `shallowRenderer.render()` has been called, you can use `shallowRenderer.getRenderOutput()` to get the shallowly rendered output. | ||||||
在 `shallowRenderer.render()` 被调用后,你可以使用 `shallowRenderer.getRenderOutput()` 来获取浅层渲染的输出。 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
You can then begin to assert facts about the output. | ||||||
然后,你就可以开始对输出进行断言(assert)了。 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,15 +1,14 @@ | ||||||
--- | ||||||
id: javascript-environment-requirements | ||||||
title: JavaScript Environment Requirements | ||||||
title: JavaScript 环境要求 | ||||||
layout: docs | ||||||
category: Reference | ||||||
permalink: docs/javascript-environment-requirements.html | ||||||
--- | ||||||
|
||||||
React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11) or which have non-compliant implementations (e.g. IE 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/). | ||||||
|
||||||
A polyfilled environment for React 16 using core-js to support older browsers might look like: | ||||||
React 16 依赖集合类型 [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) 和 [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)。如果你要支持没有原生提供这些能力的老的浏览器或者设备(例如 IE < 11)或者不符合规范实现的(例如 IE 11),考虑在你的应用库中包含一个全局的 polyfill ,例如[core-js](https://github.com/zloirock/core-js) 或 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/)。 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 少了个空格
Suggested change
|
||||||
|
||||||
一个使用 core-js 支持老版浏览器的 React 16 的 polyfill 环境大致如下: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 该行下应该有一个空行 |
||||||
```js | ||||||
import 'core-js/es6/map'; | ||||||
import 'core-js/es6/set'; | ||||||
|
@@ -23,8 +22,8 @@ ReactDOM.render( | |||||
); | ||||||
``` | ||||||
|
||||||
React also depends on `requestAnimationFrame` (even in test environments). | ||||||
You can use the [raf](https://www.npmjs.com/package/raf) package to shim `requestAnimationFrame`: | ||||||
React 也依赖于 requestAnimationFrame(甚至包括测试环境)。 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
你可以使用 [raf](https://www.npmjs.com/package/raf) 包增添 `requestAnimationFrame`: | ||||||
Ryanhui marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
```js | ||||||
import 'raf/polyfill'; | ||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.