Skip to content
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

docs(cn): translate content/docs/addons-test-utils.md into Chinese #10

Merged
merged 5 commits into from
Feb 18, 2019
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 38 additions & 39 deletions content/docs/addons-test-utils.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@ layout: docs
category: Reference
---

**Importing**
**引入**

```javascript
import ReactTestUtils from 'react-dom/test-utils'; // ES6
var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
```

## Overview
## 概述

`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](http://facebook.github.io/jest/docs/en/tutorial-react.html#content).
`ReactTestUtils` 让你在所选的测试框架中测试 React 组件变得容易。在 Facebook 我们使用 [Jest](https://facebook.github.io/jest/) 来做无压力 JavaScript 测试。学习如何开始使用 Jest 测试可以浏览官方文档中的 [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content) 部分。

> Note:
> 注意:
>
> Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components' output. If you're deciding on a unit testing utility to use together with Jest, or any other test runner, it's worth checking out: [http://airbnb.io/enzyme/](http://airbnb.io/enzyme/)
>
> Alternatively, there is another testing utility called react-testing-library designed to enable and encourage writing tests that use your components as the end users use them. It also works with any test runner: [https://git.io/react-testing-library](https://git.io/react-testing-library)
> Airbnb 发布了一款叫作 Enzyme 的测试工具,它能轻松对 React 组件的输出进行断言、控制和遍历。如果你需要决定一款和 Jest 搭配使用单元测试工具,或者其他测试运行器,值得看一下:[http://airbnb.io/enzyme/](http://airbnb.io/enzyme/)
>
> 或者,这里有另外一款叫作 react-testing-library 的测试工具,设计成能够和鼓励像终端用户使用你的组件一样写测试用例。并且它也能与其他任何一款测试运行器配合工作:[https://git.io/react-testing-library](https://git.io/react-testing-library)

- [`Simulate`](#simulate)
- [`renderIntoDocument()`](#renderintodocument)
Expand All @@ -39,18 +39,17 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
- [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype)
- [`findRenderedComponentWithType()`](#findrenderedcomponentwithtype)

## Reference
## 参考

## Shallow Rendering
## 浅层渲染

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 编写单元测试时,浅层渲染非常有用。浅层渲染能让你渲染一个组件时“只渲染一层”,然后断言组件渲染函数返回的内容,不用担心子组件的渲染行为,这样没有组件实例化和真正的渲染。这种情况也不需要 DOM

> Note:
>
> The shallow renderer has moved to `react-test-renderer/shallow`.<br>
> [Learn more about shallow rendering on its reference page.](/docs/shallow-renderer.html)
> 注意:
> 浅层渲染的方法被移动到了 `react-test-renderer/shallow`。<br>
> [学习更多关于浅层渲染的内容查看这篇文档](/docs/shallow-renderer.html)

## Other Utilities
## 其他工具库

### `Simulate`

Expand All @@ -61,19 +60,19 @@ Simulate.{eventName}(
)
```

Simulate an event dispatch on a DOM node with optional `eventData` event data.
使用可选的 `eventData` 事件数据来模拟在 DOM 节点上触发一个事件。

`Simulate` has a method for [every event that React understands](/docs/events.html#supported-events).
`Simulate` 有对应的方法来支持 [React 支持的所有事件](/docs/events.html#supported-events).

**Clicking an element**
**点击一个元素**

```javascript
// <button ref={(node) => this.button = node}>...</button>
const node = this.button;
ReactTestUtils.Simulate.click(node);
```

**Changing the value of an input field and then pressing ENTER.**
**修改一个 input 输入框的值,然后按回车键**

```javascript
// <input ref={(node) => this.textInput = node} />
Expand All @@ -83,9 +82,9 @@ ReactTestUtils.Simulate.change(node);
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
```

> Note
> 注意:
>
> 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.
> 你必须提供一切需要在组件中用到的事件属性(比如:keyCodewhich 等等),因为 React 没有为你创建这些属性。

* * *

Expand All @@ -95,11 +94,11 @@ ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
renderIntoDocument(element)
```

Render a React element into a detached DOM node in the document. **This function requires a DOM.**
渲染一个 React 元素到 document 中的一个单独的 DOM 节点上。**这个函数需要一个 DOM 对象。**

> Note:
> 注意:
>
> 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.
> 你需要在引入 `React` **之前**确保 `window``window.document` `window.document.createElement` 能在全局环境中获取到。不然 React 会认为它没有权限去操作 DOM,以及像 `setState` 方法将不可用。

* * *

Expand All @@ -112,11 +111,11 @@ mockComponent(
)
```

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.
将一个模拟组件模块传递给这个方法,使用方法来扩充它,使它可以用作一个虚拟 React 组件。与通常的渲染不同,组件将变成一个简单的 `<div>` (如果提供了 `mockTagName` 则是其他标签),包含任何提供的子级。

> Note:
> 注意:
>
> `mockComponent()` is a legacy API. We recommend using [shallow rendering](/docs/test-utils.html#shallow-rendering) or [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead.
> `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) 来代替。

* * *

Expand All @@ -126,7 +125,7 @@ Pass a mocked component module to this method to augment it with useful methods
isElement(element)
```

Returns `true` if `element` is any React element.
当 `element` 是任何一种 React 元素时,返回 `true`。

* * *

Expand All @@ -139,7 +138,7 @@ isElementOfType(
)
```

Returns `true` if `element` is a React element whose type is of a React `componentClass`.
当 `element` 是一种 React 元素,并且它的类型是参数 `componentClass` 的类型时,返回 `true`。

* * *

Expand All @@ -149,7 +148,7 @@ Returns `true` if `element` is a React element whose type is of a React `compone
isDOMComponent(instance)
```

Returns `true` if `instance` is a DOM component (such as a `<div>` or `<span>`).
当 `instance` 是一个 DOM 组件(比如 `<div>` `<span>`)时,返回 `true`。

* * *

Expand All @@ -159,7 +158,7 @@ Returns `true` if `instance` is a DOM component (such as a `<div>` or `<span>`).
isCompositeComponent(instance)
```

Returns `true` if `instance` is a user-defined component, such as a class or a function.
当 `instance` 是一个用户自定义的组件,比如一个类或者一个函数时,返回 `true`。

* * *

Expand All @@ -172,7 +171,7 @@ isCompositeComponentWithType(
)
```

Returns `true` if `instance` is a component whose type is of a React `componentClass`.
当 `instance` 是一个组件,并且它的类型是参数 `componentClass` 的类型时,返回 `true`。

* * *

Expand All @@ -185,7 +184,7 @@ findAllInRenderedTree(
)
```

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.
遍历所有在参数 `tree` 中的组件,记录所有 `test(component)` `true` 的组件。这个方法本身没有那么有用,但是它常常被用作其他测试用例的原型。

* * *

Expand All @@ -198,7 +197,7 @@ scryRenderedDOMComponentsWithClass(
)
```

Finds all DOM elements of components in the rendered tree that are DOM components with the class name matching `className`.
查找渲染树中组件的所有 DOM 元素,这些组件是 css 类名与参数 `className` 匹配的 DOM 组件。

* * *

Expand All @@ -211,7 +210,7 @@ findRenderedDOMComponentWithClass(
)
```

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.
功能类似于 [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass),但是预计只有一个结果,然后返回这个结果,如果除了一个匹配项之外还有其他匹配项,则抛出异常。

* * *

Expand All @@ -224,7 +223,7 @@ scryRenderedDOMComponentsWithTag(
)
```

Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching `tagName`.
查找渲染树中组件的所有的 DOM 元素,这些组件是标记名与参数 `tagName` 匹配的 DOM 组件。

* * *

Expand All @@ -237,7 +236,7 @@ findRenderedDOMComponentWithTag(
)
```

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.
功能类似于 [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag),但是预计只有一个结果,然后返回这个结果,如果除了一个匹配项之外还有其他匹配项,则抛出异常。

* * *

Expand All @@ -250,7 +249,7 @@ scryRenderedComponentsWithType(
)
```

Finds all instances of components with type equal to `componentClass`.
查找组件类型等于参数 `componentClass` 的组件的所有实例。

* * *

Expand All @@ -263,7 +262,7 @@ findRenderedComponentWithType(
)
```

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.
功能类似于 [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype),但是预计只有一个结果,然后返回这个结果,如果除了一个匹配项之外还有其他匹配项,则抛出异常。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

功能类似于 scryRenderedComponentsWithType(),仅进行一个组件类型的匹配并且返回。如果匹配出的数量非一,则抛出异常。

Copy link
Author

@caiyongmin caiyongmin Feb 12, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

“非一” 这个表述有些个人化了,个人觉得这里还是直译比较好。因为看其他文档翻译也有类似这样的翻译句式


* * *