Skip to content

Commit 89ab7cb

Browse files
d4vsanchezcarburo
authored andcommitted
Translate: New version of Test Utils to Spanish (#119)
1 parent cbd4cae commit 89ab7cb

File tree

1 file changed

+20
-21
lines changed

1 file changed

+20
-21
lines changed

content/docs/addons-test-utils.md

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
1919

2020
> Nota:
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+
> Recomendamos utilizar [`react-testing-library`](https://git.io/react-testing-library) que está diseñada para permitir e incentivar la escritura de las pruebas para que usen los componentes de la misma forma en que lo harían los usuarios finales.
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+
> Como otra opción, Airbnb ha liberado una utilidad de pruebas llamada [Enzyme](http://airbnb.io/enzyme/), que hace fácil asegurar, manipular y navegar por los resultados de tus Componentes de React.
2525
2626
- [`act()`](#act)
2727
- [`mockComponent()`](#mockcomponent)
@@ -44,13 +44,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
4444

4545
### `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+
Para preparar un componente en ser asegurado, debes envolver el código que lo renderiza y que realiza actualizaciones sobre este en un llamado a `act()`. Esto hace que tus pruebas corran de una forma más parecida a como lo hace React en el navegador.
4848

49-
>Note
49+
>Nota
5050
>
51-
>If you use `react-test-renderer`, it also provides an `act` export that behaves the same way.
51+
>Si usas `react-test-renderer`, este también provee un método `act` que se comporta de la misma forma.
5252
53-
For example, let's say we have this `Counter` component:
53+
Por ejemplo, digamos que tenemos este componente `Counter`:
5454

5555
```js
5656
class App extends React.Component {
@@ -83,7 +83,7 @@ class App extends React.Component {
8383
}
8484
```
8585

86-
Here is how we can test it:
86+
Y así es como podemos probarlo:
8787

8888
```js{3,20-22,29-31}
8989
import React from 'react';
@@ -104,7 +104,7 @@ afterEach(() => {
104104
});
105105
106106
it('can render and update a counter', () => {
107-
// Test first render and componentDidMount
107+
// Prueba la primer renderización y componentDidMount
108108
act(() => {
109109
ReactDOM.render(<Counter />, container);
110110
});
@@ -113,7 +113,7 @@ it('can render and update a counter', () => {
113113
expect(label.textContent).toBe('You clicked 0 times');
114114
expect(document.title).toBe('You clicked 0 times');
115115
116-
// Test second render and componentDidUpdate
116+
// Prueba la segunda renderización y componentDidUpdate
117117
act(() => {
118118
button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
119119
});
@@ -122,7 +122,7 @@ it('can render and update a counter', () => {
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+
No olvides que la ejecución de eventos del DOM sólo funciona cuando el contenedor del DOM es agregado al `document`. Puedes utilizar una ayuda como [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) para reducir todo el código repetitivo.
126126

127127
* * *
128128

@@ -296,20 +296,20 @@ Igual a [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) pe
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+
Renderiza un Elemento de React en un nodo separado del DOM en el documento. **Esta función requiere un DOM.** Esto es equivalente a hacer:
300300

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

306-
> Note:
306+
> Nota:
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+
> Necesitarás tener `window`, `window.document` y `window.document.createElement` habilitados de forma global **antes** de importar `React`. De otro modo React pensará que no tiene acceso al DOM y los métodos como `setState` no funcionarán.
309309
310310
* * *
311311

312-
## Other Utilities
312+
## Otras utilidades
313313

314314
### `Simulate`
315315

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

323-
Simulate an event dispatch on a DOM node with optional `eventData` event data.
323+
Simula la ejecución de un evento en un nodo del DOM con los datos de evento `eventData` opcionales.
324324

325-
`Simulate` has a method for [every event that React understands](/docs/events.html#supported-events).
325+
`Simulate` tiene un método para [cada uno de los eventos que React comprende](/docs/events.html#supported-events).
326326

327-
**Clicking an element**
327+
**Haciendo clic en un elemento**
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+
**Cambiar el valor en un campo de entrada y presionar ENTER.**
336336

337337
```javascript
338338
// <input ref={(node) => this.textInput = node} />
@@ -342,8 +342,7 @@ ReactTestUtils.Simulate.change(node);
342342
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
343343
```
344344

345-
> Note
346-
>
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.
345+
> Nota
346+
> Se debe proveer cualquiera de las propiedades del evento que se esté usando en tu componente (p.e. keyCode, which, etc...) ya que React no creará ninguna de estas por ti.
348347
349348
* * *

0 commit comments

Comments
 (0)