|
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)) |
| 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)) |
0 commit comments