Skip to content

Commit 75ec1eb

Browse files
authored
Merge pull request #54 from reactjs/api/test-renderer
Test Renderer translation
2 parents 97f14e7 + 5f53a84 commit 75ec1eb

File tree

2 files changed

+44
-46
lines changed

2 files changed

+44
-46
lines changed

content/docs/nav.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101
- id: test-utils
102102
title: Tesztelői segédeszközök
103103
- id: test-renderer
104-
title: Teszt renderelő
104+
title: Tesztrenderelő
105105
- id: javascript-environment-requirements
106106
title: JS környezeti követelmények
107107
- id: glossary

content/docs/reference-test-renderer.md

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
---
22
id: test-renderer
3-
title: Test Renderer
3+
title: Tesztrenderelő
44
permalink: docs/test-renderer.html
55
layout: docs
66
category: Reference
77
---
88

9-
**Importing**
9+
**Importálás**
1010

1111
```javascript
1212
import TestRenderer from 'react-test-renderer'; // ES6
13-
const TestRenderer = require('react-test-renderer'); // ES5 with npm
13+
const TestRenderer = require('react-test-renderer'); // ES5 npm-mel
1414
```
1515

16-
## Overview {#overview}
16+
## Áttekintés {#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+
Ez a csomag egy React renderelőt nyújt, ami React komponensek, tiszta JavaScript objektumokként való renderelését teszi lehetővé, a DOM és natív mobilkörnyezetek nélkül.
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+
Alapjában véve, ez a csomag a platform nézethierarchiájáról (ami hasonló a DOM fához) való pillanatképek készítését teszi egyszerűbbé, amiket egy React DOM, vagy React Native komponens renderel böngésző, vagy [jsdom](https://github.com/tmpvar/jsdom) használata nélkül.
2121

22-
Example:
22+
Példa:
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](https://jestjs.io/docs/en/snapshot-testing).
41+
Használhatod a Jest pillanatkép-tesztelő funkcióját a JSON fa automatikus fájlba való kimentéséhez, és hogy le tudd ellenőrizni, hogy a tesztjeid megváltoztak-e: [Itt tanulhatsz róla többet](https://jestjs.io/docs/en/snapshot-testing).
4242

43-
You can also traverse the output to find specific nodes and make assertions about them.
43+
A kimenetet be is tudod járni, hogy konkrét csomópontokhoz tudj állításokat írni.
4444

4545
```javascript
4646
import TestRenderer from 'react-test-renderer';
@@ -49,30 +49,30 @@ function MyComponent() {
4949
return (
5050
<div>
5151
<SubComponent foo="bar" />
52-
<p className="my">Hello</p>
52+
<p className="my">Helló</p>
5353
</div>
5454
)
5555
}
5656

5757
function SubComponent() {
5858
return (
59-
<p className="sub">Sub</p>
59+
<p className="sub">Al</p>
6060
);
6161
}
6262

6363
const testRenderer = TestRenderer.create(<MyComponent />);
6464
const testInstance = testRenderer.root;
6565

6666
expect(testInstance.findByType(SubComponent).props.foo).toBe('bar');
67-
expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
67+
expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Al']);
6868
```
6969

7070
### TestRenderer {#testrenderer}
7171

7272
* [`TestRenderer.create()`](#testrenderercreate)
7373
* [`TestRenderer.act()`](#testrendereract)
7474

75-
### TestRenderer instance {#testrenderer-instance}
75+
### TestRenderer példány {#testrenderer-instance}
7676

7777
* [`testRenderer.toJSON()`](#testrenderertojson)
7878
* [`testRenderer.toTree()`](#testrenderertotree)
@@ -95,43 +95,43 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
9595
* [`testInstance.parent`](#testinstanceparent)
9696
* [`testInstance.children`](#testinstancechildren)
9797

98-
## Reference {#reference}
98+
## Referencia {#reference}
9999

100100
### `TestRenderer.create()` {#testrenderercreate}
101101

102102
```javascript
103103
TestRenderer.create(element, options);
104104
```
105105

106-
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. Returns a [TestRenderer instance](#testrenderer-instance).
106+
Egy `TestRenderer` példányt készít az átadott React elemmel. Nem a valós DOM-ot használja, de így is kirendereli a teljes komponensfát a memóriába, hogy állításokat tudj róla írni. Egy [TestRenderer példányt](#testrenderer-instance) ad vissza.
107107

108108
### `TestRenderer.act()` {#testrendereract}
109109

110110
```javascript
111111
TestRenderer.act(callback);
112112
```
113113

114-
Similar to the [`act()` helper from `react-dom/test-utils`](/docs/test-utils.html#act), `TestRenderer.act` prepares a component for assertions. Use this version of `act()` to wrap calls to `TestRenderer.create` and `testRenderer.update`.
114+
Hasonló a [`react-dom/test-utils` csomag `act()` segédmetódusához](/docs/test-utils.html#act), a `TestRenderer.act` előkészít egy komponenst az állítások írásához. Használd az `act()` ezen verzióját a `TestRenderer.create` és `testRenderer.update` hívások becsomagolásához.
115115

116116
```javascript
117117
import {create, act} from 'react-test-renderer';
118-
import App from './app.js'; // The component being tested
118+
import App from './app.js'; // A tesztelendő komponens
119119

120-
// render the component
120+
// rendereld a komponenst
121121
let root;
122122
act(() => {
123123
root = create(<App value={1}/>)
124124
});
125125

126-
// make assertions on root
126+
// írj állításokat a gyökérhez
127127
expect(root.toJSON()).toMatchSnapshot();
128128

129-
// update with some different props
129+
// frissítsd néhány eltérő proppal
130130
act(() => {
131131
root.update(<App value={2}/>);
132132
})
133133

134-
// make assertions on root
134+
// írj állításokat a gyökérhez
135135
expect(root.toJSON()).toMatchSnapshot();
136136
```
137137

@@ -141,141 +141,139 @@ expect(root.toJSON()).toMatchSnapshot();
141141
testRenderer.toJSON()
142142
```
143143

144-
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).
144+
Egy, a renderelt fát képviselő objektumot ad vissza. Ez a fa csak platformspecifikus csomópontokat és azok propjait tartalmazza, mint a `<div>`, vagy `<View>`, a felhasználó által írt komponenseket viszont nem. Ez jól jön [pillanatkép-teszteléskor](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
145145

146146
### `testRenderer.toTree()` {#testrenderertotree}
147147

148148
```javascript
149149
testRenderer.toTree()
150150
```
151151

152-
Return an object representing the rendered tree. 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.
152+
Egy, a renderelt fát képviselő objektumot ad vissza. A reprezentáció részletesebb, mint amit a `toJSON()` ad vissza, és a felhasználó által írt komponenseket is tartalmazza. Valószínűleg erre a metódusra nem lesz szükséged, kivéve ha a saját állítási könyvtáradat írod a tesztrenderelőre építve.
153153

154154
### `testRenderer.update()` {#testrendererupdate}
155155

156156
```javascript
157157
testRenderer.update(element)
158158
```
159159

160-
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.
160+
Újrarendereli a memóriában lévő fát egy új gyökérelemmel. Ez egy React frissítést szimulál a gyökéren. Ha az új elemnek ugyanaz a típusa és kulcsa mint az előzőnek, a fa frissítve lesz; máskülönben egy új fa lesz létrehozva.
161161

162162
### `testRenderer.unmount()` {#testrendererunmount}
163163

164164
```javascript
165165
testRenderer.unmount()
166166
```
167-
168-
Unmount the in-memory tree, triggering the appropriate lifecycle events.
167+
Leválaszt egy memóriában lévő fát, a megfelelő életciklus-események meghívásával.
169168

170169
### `testRenderer.getInstance()` {#testrenderergetinstance}
171170

172171
```javascript
173172
testRenderer.getInstance()
174173
```
175174

176-
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.
175+
Ha elérhető, egy, a gyökérelemhez tartózó példányt ad vissza. Ha a gyökérelem egy függvénykomponens, ez nem fog működni, mivel a függvényeknek nincsenek példányaik.
177176

178177
### `testRenderer.root` {#testrendererroot}
179178

180179
```javascript
181180
testRenderer.root
182181
```
183182

184-
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.
183+
A gyökér "tesztpéldány" objektumát adja vissza, ami hasznos a fában lévő specifikus csomópontokhoz való állítások írásához. Mélyebben lévő "tesztpéldányok" megtalálásához is használhatod.
185184

186185
### `testInstance.find()` {#testinstancefind}
187-
188186
```javascript
189187
testInstance.find(test)
190188
```
191189

192-
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.
190+
Megtalálja azt az egyetlen leszármazott tesztpéldányt, ami esetében a `test(testInstance)` `true` értéket ad vissza. Egy hibát dob, ha a `test(testInstance)` nem csak egy tesztpéldány esetén ad vissza `true` értéket.
193191

194192
### `testInstance.findByType()` {#testinstancefindbytype}
195193

196194
```javascript
197195
testInstance.findByType(type)
198196
```
199197

200-
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.
198+
Megtalálja azt az egyetlen leszármazott tesztpéldányt, aminek a típusa megegyezik a megadott `type`-pal. Egy hibát dob, ha nem csak egy tesztpéldány létezik a megadott `type` típussal.
201199

202200
### `testInstance.findByProps()` {#testinstancefindbyprops}
203201

204202
```javascript
205203
testInstance.findByProps(props)
206204
```
207205

208-
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.
206+
Megtalálja azt az egyetlen leszármazott tesztpéldányt, aminek a propjai megegyeznek a megadott `props`-szal. Egy hibát dob, ha nem csak egy tesztpéldány létezik a megadott `props` propokkal.
209207

210208
### `testInstance.findAll()` {#testinstancefindall}
211209

212210
```javascript
213211
testInstance.findAll(test)
214212
```
215213

216-
Find all descendant test instances for which `test(testInstance)` returns `true`.
214+
Megtalálja az összes tesztpéldányt, aminél a `test(testInstance)` `true` értéket ad vissza.
217215

218216
### `testInstance.findAllByType()` {#testinstancefindallbytype}
219217

220218
```javascript
221219
testInstance.findAllByType(type)
222220
```
223221

224-
Find all descendant test instances with the provided `type`.
222+
Megtalálja az összes tesztpéldányt, ahol a típus megegyezik a megadott `type`-val.
225223

226224
### `testInstance.findAllByProps()` {#testinstancefindallbyprops}
227225

228226
```javascript
229227
testInstance.findAllByProps(props)
230228
```
231229

232-
Find all descendant test instances with the provided `props`.
230+
Megtalálja az összes tesztpéldányt, ahol a propok megegyeznek a megadott `props`-szal.
233231

234232
### `testInstance.instance` {#testinstanceinstance}
235233

236234
```javascript
237235
testInstance.instance
238236
```
239237

240-
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.
238+
Ennek a tesztpéldánynak megfelelő komponenspéldány. Csak osztálykomponenseknél elérhető, mivel függvénykomponenseknek nincsenek példányai. Az adott komponens `this` értékével egyezik meg.
241239

242240
### `testInstance.type` {#testinstancetype}
243241

244242
```javascript
245243
testInstance.type
246244
```
247245

248-
The component type corresponding to this test instance. For example, a `<Button />` component has a type of `Button`.
246+
Ennek a tesztpéldánynak megfelelő komponenstípus. Például, a `<Button/>` komponens típusa `Button`.
249247

250248
### `testInstance.props` {#testinstanceprops}
251249

252250
```javascript
253251
testInstance.props
254252
```
255253

256-
The props corresponding to this test instance. For example, a `<Button size="small" />` component has `{size: 'small'}` as props.
254+
Ennek a tesztpéldánynak megfelelő propok. Például, a `<Button size="small" />` propjai `{size: 'small'}`.
257255

258256
### `testInstance.parent` {#testinstanceparent}
259257

260258
```javascript
261259
testInstance.parent
262260
```
263261

264-
The parent test instance of this test instance.
262+
Ennek a tesztpéldánynak a szülő tesztpéldánya.
265263

266264
### `testInstance.children` {#testinstancechildren}
267265

268266
```javascript
269267
testInstance.children
270268
```
271269

272-
The children test instances of this test instance.
270+
Ennek a tesztpéldánynak a gyermek tesztpéldányai.
273271

274-
## Ideas {#ideas}
272+
## Ötletek {#ideas}
275273

276-
You can pass `createNodeMock` function to `TestRenderer.create` as the option, which allows for custom mock refs.
277-
`createNodeMock` accepts the current element and should return a mock ref object.
278-
This is useful when you test a component that relies on refs.
274+
Opcióként átadhatod a `createNodeMock` függvényt a `TestRenderer.create`-nek, ami lehetőséget ad egyedi, hamis refek használatához.
275+
A `createNodeMock` a jelenlegi elemet fogadja, és egy hamis refobjektumot kell, hogy visszaadjon.
276+
Ez hasznos, amikor egy reftől függő komponenst tesztelsz.
279277

280278
```javascript
281279
import TestRenderer from 'react-test-renderer';
@@ -299,7 +297,7 @@ TestRenderer.create(
299297
{
300298
createNodeMock: (element) => {
301299
if (element.type === 'input') {
302-
// mock a focus function
300+
// készíts egy hamis focus függvényt
303301
return {
304302
focus: () => {
305303
focused = true;

0 commit comments

Comments
 (0)