Skip to content

Translate: Test Utilities (New Version) #119

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

Merged
merged 1 commit into from
Feb 7, 2019
Merged
Changes from all 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
41 changes: 20 additions & 21 deletions content/docs/addons-test-utils.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm

> Nota:
>
> 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.
> 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.
>
> 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.
> 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.

- [`act()`](#act)
- [`mockComponent()`](#mockcomponent)
Expand All @@ -44,13 +44,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm

### `act()`

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.
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.

>Note
>Nota
>
>If you use `react-test-renderer`, it also provides an `act` export that behaves the same way.
>Si usas `react-test-renderer`, este también provee un método `act` que se comporta de la misma forma.

For example, let's say we have this `Counter` component:
Por ejemplo, digamos que tenemos este componente `Counter`:

```js
class App extends React.Component {
Expand Down Expand Up @@ -83,7 +83,7 @@ class App extends React.Component {
}
```

Here is how we can test it:
Y así es como podemos probarlo:

```js{3,20-22,29-31}
import React from 'react';
Expand All @@ -104,7 +104,7 @@ afterEach(() => {
});

it('can render and update a counter', () => {
// Test first render and componentDidMount
// Prueba la primer renderización y componentDidMount
act(() => {
ReactDOM.render(<Counter />, container);
});
Expand All @@ -113,7 +113,7 @@ it('can render and update a counter', () => {
expect(label.textContent).toBe('You clicked 0 times');
expect(document.title).toBe('You clicked 0 times');

// Test second render and componentDidUpdate
// Prueba la segunda renderización y componentDidUpdate
act(() => {
button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
});
Expand All @@ -122,7 +122,7 @@ it('can render and update a counter', () => {
});
```

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.
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.

* * *

Expand Down Expand Up @@ -296,20 +296,20 @@ Igual a [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) pe
renderIntoDocument(element)
```

Render a React element into a detached DOM node in the document. **This function requires a DOM.** It is effectively equivalent to:
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:

```js
const domContainer = document.createElement('div');
ReactDOM.render(element, domContainer);
```

> Note:
> Nota:
>
> 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.
> 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.

* * *

## Other Utilities
## Otras utilidades

### `Simulate`

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

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

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

**Clicking an element**
**Haciendo clic en un elemento**

```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.**
**Cambiar el valor en un campo de entrada y presionar ENTER.**

```javascript
// <input ref={(node) => this.textInput = node} />
Expand All @@ -342,8 +342,7 @@ 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.
> Nota
> 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.

* * *