Skip to content

Commit c5ab740

Browse files
author
Jakub Drozdek
committed
Translate 'Test Utils' page
1 parent e8c6b54 commit c5ab740

File tree

1 file changed

+52
-52
lines changed

1 file changed

+52
-52
lines changed

Diff for: content/docs/addons-test-utils.md

+52-52
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
---
22
id: test-utils
3-
title: Test Utilities
3+
title: Narzędzia do testowania
44
permalink: docs/test-utils.html
55
layout: docs
66
category: Reference
77
---
88

9-
**Importing**
9+
**Importowanie**
1010

1111
```javascript
1212
import ReactTestUtils from 'react-dom/test-utils'; // ES6
13-
var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
13+
var ReactTestUtils = require('react-dom/test-utils'); // ES5 z zainstalowanym npm
1414
```
1515

16-
## Overview {#overview}
16+
## Ogólne informacje {#overview}
1717

18-
`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).
18+
`ReactTestUtils` pozwala na łatwiejsze testowanie komponentów reactowych przy pomocy dowolnego frameworka. W Facebooku korzystamy do tego celu z biblioteki [Jest](https://facebook.github.io/jest/), która sprawia, że pisanie testów jest mniej kłopotliwe. Do nauki podstaw Jesta polecamy artykuł pt. ["Samouczek dla Reacta"](http://facebook.github.io/jest/docs/en/tutorial-react.html#content), znajdujący się na oficjalnej stronie biblioteki.
1919

20-
> Note:
20+
> Uwaga:
2121
>
22-
> We recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to enable and encourage writing tests that use your components as the end users do.
22+
> Zalecamy korzystanie z biblioteki [`react-testing-library`](https://git.io/react-testing-library). Została on stworzona w celu propagowania idei pisania testów, które używają komponentów podobnie jak potencjalny użytkownik aplikacji.
2323
>
24-
> Alternatively, Airbnb has released a testing utility called [Enzyme](http://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.
24+
> Jako alternatywę, firma Airbnb opublikowała narzędzie do testowania o nazwie [Enzyme](http://airbnb.io/enzyme/), które pozwala na łatwe pisanie asercji, a także manipulowanie i przechodzenie drzewa zwróconego przez komponenty reactowe.
2525
2626
- [`act()`](#act)
2727
- [`mockComponent()`](#mockcomponent)
@@ -40,17 +40,17 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
4040
- [`renderIntoDocument()`](#renderintodocument)
4141
- [`Simulate`](#simulate)
4242

43-
## Reference {#reference}
43+
## Dokumentacja {#reference}
4444

4545
### `act()` {#act}
4646

47-
To prepare a component for assertions, wrap the code rendering it and performing updates inside an `act()` call. This makes your test run closer to how React works in the browser.
47+
Aby przygotować komponent do testowania, należy kod renderujący i aktualizujący go "opakować" w wywołanie funkcji `act()`. Dzięki temu test zostanie uruchomiony w taki sposób, aby jak najwierniej odtworzyć zachowanie Reacta w przeglądarce.
4848

49-
>Note
49+
>Uwaga
5050
>
51-
>If you use `react-test-renderer`, it also provides an `act` export that behaves the same way.
51+
>Biblioteka `react-test-renderer` również udostępnia funkcję `act`, która działa w podobny sposób.
5252
53-
For example, let's say we have this `Counter` component:
53+
Dla przykładu, załóżmy, że napisaliśmy następujący komponent `Counter` (pol. *licznik*):
5454

5555
```js
5656
class App extends React.Component {
@@ -60,10 +60,10 @@ class App extends React.Component {
6060
this.handleClick = this.handleClick.bind(this);
6161
}
6262
componentDidMount() {
63-
document.title = `You clicked ${this.state.count} times`;
63+
document.title = `Kliknięto ${this.state.count} razy`;
6464
}
6565
componentDidUpdate() {
66-
document.title = `You clicked ${this.state.count} times`;
66+
document.title = `Kliknięto ${this.state.count} razy`;
6767
}
6868
handleClick() {
6969
this.setState(state => ({
@@ -73,17 +73,17 @@ class App extends React.Component {
7373
render() {
7474
return (
7575
<div>
76-
<p>You clicked {this.state.count} times</p>
76+
<p>Kliknięto {this.state.count} razy</p>
7777
<button onClick={this.handleClick}>
78-
Click me
78+
Kliknij mnie
7979
</button>
8080
</div>
8181
);
8282
}
8383
}
8484
```
8585

86-
Here is how we can test it:
86+
W taki oto sposób moglibyśmy go przetestować:
8787

8888
```js{3,20-22,29-31}
8989
import React from 'react';
@@ -103,26 +103,26 @@ afterEach(() => {
103103
container = null;
104104
});
105105
106-
it('can render and update a counter', () => {
107-
// Test first render and componentDidMount
106+
it('potrafi wyrenderować i aktualizować licznik', () => {
107+
// Testuje pierwsze renderowanie i metodę cyklu życia "componentDidMount"
108108
act(() => {
109109
ReactDOM.render(<Counter />, container);
110110
});
111111
const button = container.querySelector('button');
112112
const label = container.querySelector('p');
113-
expect(label.textContent).toBe('You clicked 0 times');
114-
expect(document.title).toBe('You clicked 0 times');
113+
expect(label.textContent).toBe('Kliknięto 0 razy');
114+
expect(document.title).toBe('Kliknięto 0 razy');
115115
116-
// Test second render and componentDidUpdate
116+
// Testuje drugie renderowanie i metodę cyklu życia "componentDidUpdate"
117117
act(() => {
118118
button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
119119
});
120-
expect(label.textContent).toBe('You clicked 1 times');
121-
expect(document.title).toBe('You clicked 1 times');
120+
expect(label.textContent).toBe('Kliknięto 1 razy');
121+
expect(document.title).toBe('Kliknięto 1 razy');
122122
});
123123
```
124124

125-
Don't forget that dispatching DOM events only works when the DOM container is added to the `document`. You can use a helper like [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) to reduce the boilerplate code.
125+
Zwróć uwagę, że przesyłanie zdarzeń DOM działa tylko wtedy, gdy kontener jest umieszczony w `document`. Możesz w tym celu użyć biblioteki pomocniczej, jak na przykład [`react-testing-library`](https://github.com/kentcdodds/react-testing-library), aby zredukować powtarzający się szablonowy kod.
126126

127127
* * *
128128

@@ -135,11 +135,11 @@ mockComponent(
135135
)
136136
```
137137

138-
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.
138+
Jeśli przekażesz do tej funkcji atrapę komponentu (ang. *mocked component*), zostanie ona wzbogacona o przydatne funkcje, które pozwolą na traktowanie jej jak sztucznego komponentu reactowego. Zamiast wyrenderować się zgodnie z implementacją, komponent stanie się zwykłym elementem `<div>` (lub innym, jeśli podamy wartość w parametrze `mockTagName`) renderującym przekazanych potomków.
139139

140-
> Note:
140+
> Uwaga:
141141
>
142-
> `mockComponent()` is a legacy API. We recommend using [shallow rendering](/docs/shallow-renderer.html) or [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead.
142+
> Funkcja `mockComponent()` jest przestarzała. Zamiast niej zalecamy używanie ["płytkiego renderowania"](/docs/shallow-renderer.html) (ang. *shallow rendering*) lub funkcji [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock).
143143
144144
* * *
145145

@@ -149,7 +149,7 @@ Pass a mocked component module to this method to augment it with useful methods
149149
isElement(element)
150150
```
151151

152-
Returns `true` if `element` is any React element.
152+
Zwraca `true`, jeśli argument `element` jest elementem reactowym.
153153

154154
* * *
155155

@@ -162,7 +162,7 @@ isElementOfType(
162162
)
163163
```
164164

165-
Returns `true` if `element` is a React element whose type is of a React `componentClass`.
165+
Zwraca `true`, jeśli argument `element` jest elementem reactowym o klasie podanej jako `componentClass`.
166166

167167
* * *
168168

@@ -172,7 +172,7 @@ Returns `true` if `element` is a React element whose type is of a React `compone
172172
isDOMComponent(instance)
173173
```
174174

175-
Returns `true` if `instance` is a DOM component (such as a `<div>` or `<span>`).
175+
Zwraca `true`, jeśli argument `instance` jest standardowym komponentem DOM (np. `<div>` lub `<span>`).
176176

177177
* * *
178178

@@ -182,7 +182,7 @@ Returns `true` if `instance` is a DOM component (such as a `<div>` or `<span>`).
182182
isCompositeComponent(instance)
183183
```
184184

185-
Returns `true` if `instance` is a user-defined component, such as a class or a function.
185+
Zwraca `true`, jeśli argument `instance` jest komponentem użytkownika, typu klasowego lub funkcyjnego.
186186

187187
* * *
188188

@@ -195,7 +195,7 @@ isCompositeComponentWithType(
195195
)
196196
```
197197

198-
Returns `true` if `instance` is a component whose type is of a React `componentClass`.
198+
Zwraca `true`, jeśli argument `instance` jest komponentem o klasie podanej jako `componentClass`.
199199

200200
* * *
201201

@@ -208,7 +208,7 @@ findAllInRenderedTree(
208208
)
209209
```
210210

211-
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.
211+
Przeszukuje wszystkie komponenty w drzewie `tree` i zwraca te, dla których wywołanie funkcji `test(komponent)` daje `true`. Funkcja ta sama w sobie nie jest zbyt użyteczna, jednak jest podstawą dla innych narzędzi do testowania.
212212

213213
* * *
214214

@@ -221,7 +221,7 @@ scryRenderedDOMComponentsWithClass(
221221
)
222222
```
223223

224-
Finds all DOM elements of components in the rendered tree that are DOM components with the class name matching `className`.
224+
Wyszukuje wszystkie elementy DOM w wyrenderowanym drzewie, których nazwa klasy CSS pasuje do wartości argumentu `className`.
225225

226226
* * *
227227

@@ -234,7 +234,7 @@ findRenderedDOMComponentWithClass(
234234
)
235235
```
236236

237-
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.
237+
Podobna w działaniu do [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass), lecz oczekuje dokładnie jednego wyniku. W przypadku znalezienia innej liczby elementów rzuca wyjątek.
238238

239239
* * *
240240

@@ -247,7 +247,7 @@ scryRenderedDOMComponentsWithTag(
247247
)
248248
```
249249

250-
Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching `tagName`.
250+
Wyszukuje wszystkie elementy DOM w wyrenderowanym drzewie, których nazwa znacznika pasuje do wartości argumentu `tagName`.
251251

252252
* * *
253253

@@ -260,7 +260,7 @@ findRenderedDOMComponentWithTag(
260260
)
261261
```
262262

263-
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.
263+
Podobna w działaniu do [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag), lecz oczekuje dokładnie jednego wyniku. W przypadku znalezienia innej liczby elementów rzuca wyjątek.
264264

265265
* * *
266266

@@ -273,7 +273,7 @@ scryRenderedComponentsWithType(
273273
)
274274
```
275275

276-
Finds all instances of components with type equal to `componentClass`.
276+
Wyszukuje wszystkie instancje komponentów, których typ jest równy argumentowi `componentClass`.
277277

278278
* * *
279279

@@ -286,7 +286,7 @@ findRenderedComponentWithType(
286286
)
287287
```
288288

289-
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.
289+
Podobna w działaniu do [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype), lecz oczekuje dokładnie jednego wyniku. W przypadku znalezienia innej liczby elementów rzuca wyjątek.
290290

291291
***
292292

@@ -296,20 +296,20 @@ Same as [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) bu
296296
renderIntoDocument(element)
297297
```
298298

299-
Render a React element into a detached DOM node in the document. **This function requires a DOM.** It is effectively equivalent to:
299+
Renderuje element reactowy do stworzonego w locie węzła drzewa DOM. **Ta funkcja działa tylko na drzewie DOM w ramach dokumentu.** Daje ten sam rezultat, co:
300300

301301
```js
302302
const domContainer = document.createElement('div');
303303
ReactDOM.render(element, domContainer);
304304
```
305305

306-
> Note:
306+
> Uwaga:
307307
>
308-
> 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.
308+
> **Zanim** zaimportujesz bibliotekę React w kodzie, w globalnym zakresie muszą być dostępne zmienne `window`, `window.document` oraz `window.document.createElement`. W przeciwnym wypadku React będzie "myślał", że nie ma dostępu do drzewa DOM, co spowoduje wyłączenie niektórych funkcji, np. `setState`.
309309
310310
* * *
311311

312-
## Other Utilities {#other-utilities}
312+
## Inne narzędzia {#other-utilities}
313313

314314
### `Simulate` {#simulate}
315315

@@ -320,30 +320,30 @@ Simulate.{eventName}(
320320
)
321321
```
322322

323-
Simulate an event dispatch on a DOM node with optional `eventData` event data.
323+
Symuluje przesłanie zdarzenia do węzła DOM, opcjonalnie dodając do niego dane zawarte w argumencie `eventData`.
324324

325-
`Simulate` has a method for [every event that React understands](/docs/events.html#supported-events).
325+
Obiekt `Simulate` posiada odpowiednie metody [dla każdego ze zdarzeń obsługiwanego przez Reacta](/docs/events.html#supported-events).
326326

327-
**Clicking an element**
327+
**Kliknięcie w element**
328328

329329
```javascript
330330
// <button ref={(node) => this.button = node}>...</button>
331331
const node = this.button;
332332
ReactTestUtils.Simulate.click(node);
333333
```
334334

335-
**Changing the value of an input field and then pressing ENTER.**
335+
**Zmiana wartości pola i wciśnięcie klawisza ENTER.**
336336

337337
```javascript
338338
// <input ref={(node) => this.textInput = node} />
339339
const node = this.textInput;
340-
node.value = 'giraffe';
340+
node.value = 'żyrafa';
341341
ReactTestUtils.Simulate.change(node);
342342
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
343343
```
344344

345-
> Note
345+
> Uwaga
346346
>
347-
> 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.
347+
> Wszelkie właściwości dla zdarzenia (np. `keyCode`, `which` itp.) należy przekazać jawnie, ponieważ React nie dodaje ich automatycznie.
348348
349349
* * *

0 commit comments

Comments
 (0)