Skip to content

Commit c7ccabc

Browse files
kutyelsindresorhus
kutyel
authored and
sindresorhus
committed
Translate React recipe to Spanish (es_ES) (#31)
1 parent bec8c06 commit c7ccabc

File tree

2 files changed

+156
-2
lines changed

2 files changed

+156
-2
lines changed

‎es_ES/docs/recipes/react.md

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
___
2+
**Nota del traductor**
3+
4+
Esta es la traducción del archivo [react.md](https://github.com/avajs/ava/blob/master/react.md). Aquí hay un [enlace](https://github.com/avajs/ava/compare/8e2f3dca177a4283ad882596d3c1425cabb998ef...master#diff-60cce07a584082115d230f2e3d571ad6) a las diferencias con la rama master de AVA (Si al hacer click en el enlace no se encuentran modificaciones en el archivo `react.md`, será por que la traducción está actualizada).
5+
___
6+
# Testeando componentes de React
7+
8+
Traducciones: [Español](https://github.com/avajs/ava-docs/blob/master/es_ES/docs/recipes/react.md), [Français](https://github.com/avajs/ava-docs/blob/master/fr_FR/docs/recipes/react.md)
9+
10+
## Configurando Babel
11+
12+
El primer paso es configurar Babel para transiplar el código JSX de los tests añadiendo una sección para ava en tu `package.json`:
13+
14+
```json
15+
{
16+
"ava": {
17+
"require": ["babel-register"],
18+
"babel": "inherit"
19+
},
20+
"babel": {
21+
"presets": ["react"]
22+
}
23+
}
24+
```
25+
26+
Puedes encontrar más información sobre configurar Babel con AVA en la [receta babelrc](babelrc.md).
27+
28+
## Usando [Enzyme](https://github.com/airbnb/enzyme)
29+
30+
Primero veamos cómo utilizar AVA con una de las librerías de tests más populares para React: [Enzyme](https://github.com/airbnb/enzyme).
31+
32+
Si sólo pretendes usar [renderizado superficial de componentes](https://facebook.github.io/react/docs/test-utils.html#shallow-rendering), no necesitas ninguna configuración adicional.
33+
34+
Primero instala [los paquetes necesarios para Enzyme](https://github.com/airbnb/enzyme/#installation):
35+
36+
```console
37+
$ npm install --save-dev enzyme react-addons-test-utils react-dom
38+
```
39+
40+
Entonces puedes usar Enzyme directamente:
41+
42+
```js
43+
import test from 'ava';
44+
import React from 'react';
45+
import { shallow } from 'enzyme';
46+
47+
const Foo = ({children}) =>
48+
<div className="Foo">
49+
<span className="bar">bar</span>
50+
{children}
51+
<span className="bar">bar</span>
52+
</div>;
53+
54+
Foo.propTypes = {
55+
children: React.PropTypes.any
56+
};
57+
58+
test('tiene la clase `.Foo`', t => {
59+
const wrapper = shallow(<Foo/>);
60+
t.true(wrapper.hasClass('Foo'));
61+
});
62+
63+
test('renderiza dos `.Bar`', t => {
64+
const wrapper = shallow(<Foo/>);
65+
t.is(wrapper.find('.bar').length, 2);
66+
});
67+
68+
test('renderiza los hijos que se le pasen', t => {
69+
const wrapper = shallow(
70+
<Foo>
71+
<div className="unique"/>
72+
</Foo>
73+
);
74+
t.true(wrapper.contains(<div className="unique"/>));
75+
});
76+
```
77+
78+
Enzyme también tiene un helper `mount` y un `render` para testear en un entorno real de navegador. Si quieres usar esos helpers, tendrás que configurar un entorno de navegador. Échale un vistazo a la [receta de cómo hacer tests en un navegador](https://github.com/avajs/ava/blob/master/docs/recipes/browser-testing.md) para ver cómo hacerlo.
79+
80+
Para ver un ejemplo de uso de AVA junto con Enzyme configurado para tests en navegador, échale un vistazo a este [proyecto de ejemplo](https://github.com/adriantoine/ava-enzyme-demo).
81+
82+
Éste es un ejemplo básico de cómo integrar Enzyme con AVA. Para más información sobre Enzyme para testear componentes de React, échale un vistazo a la [documentación de Enzyme](http://airbnb.io/enzyme/).
83+
84+
## Utilizando helpers de JSX
85+
86+
Otro enfoque para testear componentes de React es usar el paquete [`react-element-to-jsx-string`](https://github.com/algolia/react-element-to-jsx-string) para comparar árboles DOM como cadenas. [`jsx-test-helpers`](https://github.com/MoOx/jsx-test-helpers) es una buena librería para gestionar el [renderizado superficial de componentes](https://facebook.github.io/react/docs/test-utils.html#shallow-rendering) y convertir JSX en strings para testear componentes de React utilizando aseveraciones ("asserts") de AVA.
87+
88+
```console
89+
$ npm install --save-dev jsx-test-helpers
90+
```
91+
92+
Ejemplo de uso:
93+
94+
```js
95+
import test from 'ava';
96+
import React from 'react';
97+
import { renderJSX, JSX } from 'jsx-test-helpers';
98+
99+
const Foo = ({children}) =>
100+
<div className="Foo">
101+
<span className="bar">bar</span>
102+
{children}
103+
<span className="bar">bar</span>
104+
</div>;
105+
106+
Foo.propTypes = {
107+
children: React.PropTypes.any
108+
};
109+
110+
test('renderiza correctamente el markup', t => {
111+
const actual = renderJSX(<Foo/>);
112+
const expected = JSX(
113+
<div className="Foo">
114+
<span className="bar">bar</span>
115+
<span className="bar">bar</span>
116+
</div>
117+
);
118+
t.is(actual, expected);
119+
});
120+
121+
test('renderiza los hijos que se le pasen', t => {
122+
const actual = renderJSX(
123+
<Foo>
124+
<div className="unique"/>
125+
</Foo>
126+
);
127+
const expected = JSX(
128+
<div className="Foo">
129+
<span className="bar">bar</span>
130+
<div className="unique"/>
131+
<span className="bar">bar</span>
132+
</div>
133+
);
134+
t.is(actual, expected);
135+
});
136+
```
137+
138+
Nota el uso de variables como `actual` y `expected` porque [`power-assert` no gestiona el JSX correctamente](https://github.com/power-assert-js/power-assert/issues/34).
139+
140+
Éste es un ejemplo básico de cómo usar `jsx-test-helpers` con AVA. Para un uso más avanzado de esta librería, échale un vistazo a [este fichero de tests con anotaciones](https://github.com/MoOx/jsx-test-helpers/blob/master/src/__tests__/index.js).
141+
142+
[Este proyecto de ejemplo](https://github.com/MoOx/jsx-test-helpers) muestra un uso básico y con una configuración mínima de AVA con `jsx-test-helpers`.
143+
144+
## Utilizando otras librerías de aseveración
145+
146+
En AVA, puedes usar cualquier librería de aseveraciones, y ya hay unas cuentas ahí fuera para testear componentes de React. He aquí una lista de librerías de aseveraciones que combinan bien con AVA:
147+
148+
- [`expect-jsx`](https://github.com/algolia/expect-jsx) ([Ejemplo](https://github.com/avajs/ava/issues/186#issuecomment-161317068))
149+
- [`unexpected-react`](https://github.com/bruderstein/unexpected-react) ([Proyecto de muestra con un ejemplo de output](https://github.com/adriantoine/ava-unexpected-react-demo))
150+
151+
## Referencias
152+
153+
- [Guía a fondo sobre cómo configurar AVA con cobertura ("coverage") de código en un proyecto con React](https://github.com/kentcdodds/react-ava-workshop)

‎es_ES/readme.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
___
1+
___
22
**Nota del traductor**
33

44
Esta es la traducción del archivo [readme.md](https://github.com/avajs/ava/blob/master/readme.md). Aquí hay un [enlace](https://github.com/avajs/ava/compare/f77ded959a0e7de6e9bf65d8c2fd6625bc59ba47...master#diff-0730bb7c2e8f9ea2438b52e419dd86c9) a las diferencias con la rama master de AVA (Si al hacer clic en el enlace no se encuentran modificaciones en el archivo `readme.md`, será por que la traducción está actualizada).
@@ -748,7 +748,8 @@ Concurrencia no es paralelismo. Permite paralelismo. [Aprende más.](http://stac
748748
- [Cobertura de código](docs/recipes/code-coverage.md)
749749
- [Endpoint testing](docs/recipes/endpoint-testing.md)
750750
- [Cuando usar `t.plan()`](docs/recipes/when-to-use-plan.md)
751-
751+
- [TypeScript](docs/recipes/typescript.md)
752+
- [Testeando componentes de React](docs/recipes/react.md)
752753

753754
## Soporte
754755

0 commit comments

Comments
 (0)