Este documento presenta una introducción al uso de Test Driven Development (TDD) en aplicaciones React. Explica los beneficios de TDD como criterios de aceptación claros, código más organizado y refactorización segura. Luego describe cómo configurar un entorno de pruebas en React usando las herramientas Jest y Enzyme, incluyendo cómo probar componentes del DOM, estado de React y acciones Redux. Finalmente, muestra un ejemplo en vivo de cómo aplicar TDD en una aplicación React-Redux real.

1. Integrando Test Driven Development
en aplicaciones React

2. Nuestras
locaciones

3. Nuestros
Panelistas
Juan Carlos Pacheco H
Senior Frontend Engineer
Tracy Leveau
Marketing Analyst

4. Agenda
• Metodologías Ágiles de Desarrollo
• Qué es TDD y sus beneficios
• TDD vs Pruebas Tradicional
• Aplicaciones React Redux Typescript
• Herramientas de Pruebas– Jest - Enzyme
• Configurando un ambiente de pruebas en Aplicaciones React
• Pruebas del DOM
• Probando Estado de React
• Probando acciones Redux y asíncronas Thunks
• Cobertura de Pruebas
• Ejemplo en vivo.
• Conclusiones y recomendaciones

5. Metodologías ágiles de desarrollo ¿QUESTIONS?
#TDDBelatrix

6. ¿Qué es TDD (Test Driven Development)? ¿QUESTIONS?
#TDDBelatrix

7. Beneficios de TDD
• Criterios de aceptación
• Enfoque
• Interfaces
• Código más organizado
• Dependencias
• Refactorización Segura
• Reducción de errores en app
• Incremento de retorno
• Documentación Actualizada
¿QUESTIONS?
#TDDBelatrix
Quality
Scope

8. TDD VS TEST LAST ¿QUESTIONS?
#TDDBelatrix
Costo de Desarrollo

9. Apps React Redux Typescript ¿QUESTIONS?
#TDDBelatrix

10. Herramientas de prueba Jest - Enzyme
¿QUESTIONS?
#TDDBelatrix

11. ¿QUESTIONS?
#TDDBelatrix
VAMOS A DIVERTIRNOS,
¡¡¡MUÉSTRAME EL CÓDIGO!!!

12. Instalando herramientas de pruebas
Jest - Enzyme
¿QUESTIONS?
#TDDBelatrix

13. ¿QUESTIONS?
#TDDBelatrix
Configuando herramientas de pruebas
Jest - Enzyme

14. PROBANDO APPS
REACT – REDUX
REALES

15. Probando Apps React - Redux reales ¿QUESTIONS?
#TDDBelatrix

16. Testeando objectos DOM ¿QUESTIONS?
#TDDBelatrix
DIVS
FORMS
INPUTSPAN
BUTTON
LINKS
H1
CONTENT

17. ¿QUESTIONS?
#TDDBelatrixProbando Apps React - Redux reales

18. Cobertura de pruebas ¿QUESTIONS?
#TDDBelatrix

19. Ejemplo en
vivo.

20. CONCLUSIONES Y
RECOMENDACIONES

21. Referencias
• JEST - ENZYME
• https://jestjs.io/
• https://airbnb.io/enzyme/docs/api/
• https://medium.com/codeclan/testing-react-with-jest-and-
enzyme-20505fec4675
• REACT - REDUX
• https://reactjs.org/
• https://es.redux.js.org/
• https://medium.com/netscape/testing-a-react-redux-app-
using-jest-and-enzyme-b349324803a9
• Typescript
• https://rjzaworski.com/2016/12/testing-typescript-with-jest

22. ¿Preguntas?

23. ¡Muchas Gracias!
www.belatrixsf.com