Testing de componentes React con Enzyme

Veremos porqué es bueno realizar testing de nuestros componentes React: a qué nos ayuda y cómo realizar los tests con Enzyme, Chai y Mocha.

Transcript

1. TESTING DE COMPONENTES
 REACT CON ENZYME (y Mocha, Chai, Sinon, el león, la bruja y el ropero)
2. $ whoami const elioRivero = { work: Automattic: { team: jetpack, position: ‘Code Wrangler’ }, }, blog: ‘elio.blog’, twitter: ‘@eliorivero’ };
3. CALYPSO Interface en JavaScript para WordPress.com y sitios Jetpack
4. CALYPSO ✦ Open Source
 github.com/Automattic/wp-calypso ✦ Implementado con React y Flux Redux
 github.com/Automattic/wp-calypso/tree/master/docs/our- approach-to-data.md ✦ REST API propia de WordPress.com
 developer.wordpress.com/docs/api/
5. JETPACK Nueva interface de usuario consistente con Calypso
6. JETPACK ✦ Open Source
 github.com/Automattic/jetpack ✦ UI de ajustes implementada con React y Redux
 github.com/Automattic/jetpack/tree/master/_inc/client ✦ REST API del core de WordPress
 github.com/WP-API/WP-API
7. ¿PORQUÉ INSISTE CON EL GUI TESTING MR. ANDERSON?
8. Verifica lo que hace el código Previene cambios futuros destructivos Acelera desarrollo de características complejas de probar continuamente Autodocumenta comportamiento
9. DECIME QUE SÓLO LO PROBASTE EN EL NAVEGADOR UNA VEZ MÁS
10. Mocha para bailar los tests
 mochajs.org Chai para aserciones
 chaijs.com Sinon para espiar acciones
 sinonjs.org Enzyme para interpretar
 airbnb.io/enzyme/ Next.js como framework github.com/zeit/next.js
11. ✦ útil para probar un componente desafectado por sus hijos. ✦ Incluye fases componentWill* shallow() API PRINCIPAL
12. ✦ útil para probar el ciclo de vida completo de un componente. ✦ Incluye fases componentDid* mount() API PRINCIPAL
13. ✦ produce árbol de la estructura HTML resultante ✦ no es un objeto Enzyme o React sino Cheerio
 cheerio.js.org render() API PRINCIPAL
14. SHALLOW DE UN COMPONENTE import React from 'react'; import { Masthead } from '../index'; import { shallow } from 'enzyme'; import { expect } from 'chai'; describe( 'Masthead', () => { it( ‘should display badge when in Dev Mode', () => { const comp = shallow( <Masthead connectionStatus="dev"/> ); expect( comp.find( 'code' ) ).to.have.length( 1 ); } ); } );
15. SHALLOW DE UN COMPONENTE import React from 'react'; import { Navigation } from '../index'; import { shallow } from 'enzyme'; import { expect } from 'chai'; let testProps = { userCanManageModules: false, userCanViewStats: false, isModuleActivated: module => false }; const wrapper = shallow( <Navigation { ...testProps } /> ); it( 'should render 1 tab: Apps', () => { expect( wrapper.find( 'NavItem' ).children() .text() ) .to.be.equal( 'Apps' ); } );
16. SHALLOW DE UN COMPONENTE import React from 'react'; import { Navigation } from '../index'; import { shallow } from 'enzyme'; import { expect } from 'chai'; let testProps = { userCanManageModules: true, userCanViewStats: false, isModuleActivated: module => false }; const wrapper = shallow( <Navigation { ...testProps } /> ); it( 'should render 3 tabs: At a Glance, Apps, Plans', () => { expect( wrapper.find( 'NavItem' ).children() .map( item => item.text() ).join() ) .to.be.equal( 'At a Glance,Apps,Plans' ); } );
17. SHALLOW DE UN COMPONENTE import React from 'react'; import { Masthead } from '../index'; import { shallow } from 'enzyme'; import { expect } from 'chai'; describe( 'Masthead', () => { it( ‘should display badge when in Dev Mode', () => { const comp = shallow( <Masthead connectionStatus="dev"/> ); expect( comp.find( 'code' ) ).to.have.length( 1 ); } ); } ); components/masthead export default connect( state => { return { connectionStatus: getSiteConnectionStatus( state ), // más props }; } )( Masthead );
18. ¡GRACIAS! ¿Preguntas? ¿Cerveza?