You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Translate "Test Renderer" (Draft)
- Translated API Reference > Test Renderer.
* Fixing Grammar
* Fixing Typo & Add reviews from offline
* Update with Reviews
* Update with Reviews
* Fix some text
constTestRenderer=require('react-test-renderer'); //ES5 with npm
13
+
constTestRenderer=require('react-test-renderer'); //npm에서 ES5를 사용하는 경우
14
14
```
15
15
16
-
## Overview {#overview}
16
+
## 개요 {#overview}
17
17
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 렌더러를 제공합니다.
19
19
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 컴포넌트에 의해 렌더링된 플랫폼 뷰 계층의 스냅샷을 쉽게 찍을 수 있도록 도와줍니다.
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](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
43
+
Jest의 스냅샷 테스트 기능으로 JSON 트리의 복사본을 파일로 자동 저장하여 테스트 내에서 변경되지 않았는지 확인할 수 있습니다. [자세히 알아보기](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html)
42
44
43
-
You can also traverse the output to find specific nodes and make assertions about them.
45
+
또한, 결과물을 순회하며 특정 노드를 찾아 원하는 값을 가지고 있는지 검증하는 데 사용할 수 있습니다.
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.
107
+
전달된 React 엘리먼트로 `TestRenderer` 인스턴스를 생성합니다. 실제 DOM을 사용하지 않지만, 컴포넌트 트리 전체를 메모리상에 렌더링하기 때문에 원하는 값을 가졌는지 검증할 수 있습니다. 반환된 인스턴스는 다음과 같은 함수와 속성을 가지고 있습니다.
106
108
107
109
### `testRenderer.toJSON()` {#testrenderertojson}
108
110
109
111
```javascript
110
112
testRenderer.toJSON()
111
113
```
112
114
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](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
115
+
렌더링 된 트리를 나타내는 객체를 반환합니다. 이 트리는 같은 플랫폼 고유의 노드(예: `<div>`, `<View>`)와, 그러한 노드의 속성만을 가지고 있습니다. 사용자가 작성한 컴포넌트는 나타나지 않습니다. 이 함수는 [스냅샷 테스팅](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) 시 유용하게 사용할 수 있습니다.
114
116
115
117
### `testRenderer.toTree()` {#testrenderertotree}
116
118
117
119
```javascript
118
120
testRenderer.toTree()
119
121
```
120
122
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.
123
+
렌더링 된 트리를 나타내는 객체를 반환합니다. `toJSON()`에서 반환되는 값과 달리 더욱 자세한 정보가 반환되며, 반환 값에는 사용자가 작성한 컴포넌트 역시 포함되어있습니다. 테스트 렌더러 위에 별도의 검증(assertion) 라이브러리를 만드는 것이 아니라면 이 함수는 필요하지 않을 것입니다.
122
124
123
125
### `testRenderer.update()` {#testrendererupdate}
124
126
125
127
```javascript
126
128
testRenderer.update(element)
127
129
```
128
130
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.
131
+
메모리 내의 트리를 새로운 최상위 엘리먼트로 다시 렌더링합니다. 이 함수를 사용해 최상위 엘리먼트에서의 React 업데이트를 시뮬레이션할 수 있습니다. 새로운 엘리먼트가 이전 엘리먼트와 같은 타입과 키(key)를 가지고 있다면 트리를 업데이트합니다. 그렇지 않다면, 새로운 트리를 새로 마운트합니다.
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.
147
+
최상위 엘리먼트에 대응하는 인스턴스가 존재하면 값을 반환합니다. 최상위 엘리먼트가 함수 컴포넌트일 경우, 함수 컴포넌트에는 인스턴스가 없기 때문에 작동하지 않습니다.
146
148
147
149
### `testRenderer.root` {#testrendererroot}
148
150
149
151
```javascript
150
152
testRenderer.root
151
153
```
152
154
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.
155
+
트리 내에서 특정 노드를 검증할 때 유용한 최상위 "테스트 인스턴스" 객체를 반환합니다. 이것을 사용하여 더욱 깊이 있는 다른 "테스트 인스턴스"를 찾을 수 있습니다.
154
156
155
157
### `testInstance.find()` {#testinstancefind}
156
158
157
159
```javascript
158
160
testInstance.find(test)
159
161
```
160
162
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.
163
+
`test(testInstance)`에 대해`true`를 반환하는 단 하나의 자식 테스트 인스턴스를 찾아 반환합니다. 해당되는 인스턴스가 하나가 아니라면 오류를 반환합니다.
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.
171
+
주어진 타입(type)에 해당하는 단 하나의 자식 테스트 인스턴스를 찾아 반환합니다. 해당되는 인스턴스가 하나가 아니라면 오류를 반환합니다.
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.
179
+
주어진 `props` 들에 해당하는 단 하나의 자식 테스트 인스턴스를 찾아 반환합니다. 해당되는 인스턴스가 하나가 아니라면 오류를 반환합니다.
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.
211
+
이 테스트 인스턴스에 해당하는 컴포넌트 인스턴스입니다. 함수 컴포넌트에는 인스턴스가 없기 때문에 클래스 컴포넌트에서만 사용할 수 있습니다. 주어진 컴포넌트 내부의`this`와 같습니다.
210
212
211
213
### `testInstance.type` {#testinstancetype}
212
214
213
215
```javascript
214
216
testInstance.type
215
217
```
216
218
217
-
The component type corresponding to this test instance. For example, a `<Button />`component has a type of `Button`.
219
+
이 테스트 인스턴스에 해당하는 컴포넌트의 타입입니다. 예를 들어, `<Button />`컴포넌트의 타입은 `Button` 입니다.
218
220
219
221
### `testInstance.props` {#testinstanceprops}
220
222
221
223
```javascript
222
224
testInstance.props
223
225
```
224
226
225
-
The props corresponding to this test instance. For example, a `<Button size="small" />`component has `{size: 'small'}`as props.
227
+
이 테스트 인스턴스에 해당하는 컴포넌트의 props들입니다. 예를 들어, `<Button size="small" />`컴포넌트는 `{size: 'small'}`이라는 props들을 가지고 있습니다.
The children test instances of this test instance.
243
+
이 테스트 인스턴스의 자식들입니다.
242
244
243
245
## Ideas {#ideas}
244
246
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.
247
+
커스텀 모의 ref를 만들어주는 `createNodeMock` 함수를 `TestRenderer.create`에 추가로 넘길 수 있습니다. `createNodeMock`은 현재의 엘리먼트를 받아 모의 ref 객체를 반환할 것입니다. 이것은 ref에 의존하는 컴포넌트를 테스트할 때 유용합니다.
0 commit comments