Introducción a Testing🧪en React⚛️

Jest + React Testing Library + Puppeteer

Qué vamos a ver?

Qué es testing (y qué no es)

Por qué deberíamos hacerlo?

• Una herramienta para prevenir bugs durante el desarrollo y no después

• Asegurar el funcionamiento apropiado de funciones, componentes y flujos en nuestra app

• Una manera de evitar romper código ya funcional sin darnos cuenta al modificar algo en ése u otro componente relacionado

• Una manera de evitar salir a producción con un código defectuoso sin darnos cuenta y que el usuario se entere al toparse con el problema

✔️ Testing es:

Qué es testing (y qué no es)

Por qué deberíamos hacerlo?

❌ Testing no es:

• Una garantía absoluta ni un seguro infalible

• Una tarea automática

• Un reemplazo de QA

• Responsabilidad únicamente de QA

• Solo una manera de "encontrar bugs" y arreglarlos en post

Testing es una manera de darnos confianza en el código que escribimos

Tipos de tests y para qué sirve cada uno

Imagen - Kent C. Dodds - TestingJavascript.com

Tipos de tests y para qué sirve cada uno

Imagen - Kent C. Dodds - TestingJavascript.com

🦥 Lento

💸 Caro

🤔 Complejo

🏃 Rápidos

💵 Baratos

🙂 Simples

💯Qué es el code coverage?💯

Una manera de ver de forma "analítica" la cobertura de nuestros tests sobre la totalidad de nuestros programas

Qué es Jest, React testing library y Puppeteer

Test Runner

Lib Aserciones

Headless Browser

Qué es Jest, React testing library y Puppeteer

Test Runner

Lib Aserciones

Headless Browser

Corre los tests

Da resultados

Lógica de tests

Condiciones

Simula interacciones de usuario en el navegador

Qué es Jest, React testing library y Puppeteer

Librería de Queries

Selectores

Interacciones

Utilidades

Setup para una app React con CRA

✔️ Jest
✔️ React Testing Library
✔️ User Event

✔️ Script para ejecutar

Que viene con CRA?

Setup para una app React con CRA

➕ jest-environment-jsdom-sixteen

➕ jest-runner-groups: 1.1.0,

➕ puppeteer: ^3.0.4,

Que hace falta agregar?

Setup para una app React con CRA

Scripts! 📜📜📜

Setup para una app React con CRA

setupTests.js 💻

Sintaxis de un Test

Sintaxis de un Test

Test Suites

Skip y Only

💡Ambos son aplicables también a los bloques "describe"💡

Pautas para escribir buenos tests

• Analizar previo a escribir el test qué es lo que quiero testear

• Definir objetivos y funcionalidades claras.

• Escribir el test para que falle y corregir.

Ya escribí mi primer test.

Donde lo guardo?

• Respetar estructura de carpetas

• Archivo .spec o .test

• Jest busca todas las carpetas con estructura __tests__ por default

• Puedo configurar otra sintaxis de ser requerido

• Puedo configurar formatos de archivo de ser requerido

Queries y Matchers

Accesibilidad y Testing

💡https://testing-library.com/docs/guide-which-query💡

Snapshot testing

Simulando Acciones de usuario

🖱️🖱️ La utilidad de la Testing Library, userEvent nos permite simular eventos de manera mucho más cercana a cómo el usuario 🖱️🖱️

Nos permite elegir inputs:

• click
• dblClick
• async type
• upload
• clear
• selectOptions
• tab

💡 Es un replanteo de la opción "nativa" de TL que es fireEvent. UserEvent simula de manera mucho más acertada las acciones 💡

Rerender nos permite actualizar props de un componente desestructurando la función al renderizar

💡 RTL nos brinda utilidades para el testeo asincrónico que son porteos directos @testing-library/dom 💡

Testeo de eventos asincrónicos ↪️/ actualización de props en un componente

Testeo de eventos asincrónicos ↪️/ actualización de props en un componente

Act nos permite simular como react registra cambios en componente y esperar a que se hayan hecho las modificaciones de estado asincrónicas antes de continuar

💡 RTL nos brinda utilidades para el testeo asincrónico que son porteos directos @testing-library/dom 💡

👻 Mockeo de Funciones y librerías 👻

Jest nos permite mockear liberías y funciones internas (por ej "fs" de node) y externas ("react-redux", "react-router-dom")para agilizar los tests y que sean más robustos.💪

Nos permite tener control de la entrada y salida de data haciendo que un componente no dependa de algo externo para poder ser testeado.

E2E con Puppeteer

Utilidades globales de Jest

beforeAll, afterAll, beforeEach y afterEach

Jest cuenta con utilidades globales que nos permiten ejecutar código repetitivo en nuestras Test Suites

💡Éstas utilidades tienen scope de bloque, por lo que importa el posicionamiento de las mismas dentro/fuera de los bloques describe💡

Referencias y bibliografía 📚

Recursos y Herramientas📚