RTL con Vitest

Unit Testing

Camilo Martínez

@equimancho

v1.0.0

Es un error capital teorizar antes de tener datos. Sin darse cuenta uno empieza a deformar los hechos para que se adapten a las teorías, en lugar de adaptar las teorías a los hechos.

Sherlock Holmes
Escándalo en Bohemia
Arthur Conan Doyle (1891)

1. Testing

@equimancho

¿Qué es un test?
¿Qué es Vitest y RTL?
Diferentes tipos de test
¿Qué es un test automatizado?
Crear un proyecto con Vite + React + TypeScript
Configurar herramientas para Static Analysis
Anatomía de un test
Primer test
TDD (Test Driven Development)

Prueba

@equimancho

10030

130

130
30

100

👍

Prueba

@equimancho

👦

👨‍🦳

Don Pedro, buenos días
2 kg de papas + 1 lb de azucar

Son $3.500

👦

¿Tiene devuelta de $10.000?

👨‍🦳

Le recibo 10.000
$500 para $4.000
$1000 para $5000
y 5 para 10

Que tenga buen día

👽

3.500
500
4.000
1.000
5.000
5.000
10.000

👍

Prueba

Unit Testing

@equimancho

Una prueba unitaria (o prueba de componente) es un trozo de código (método o función) diseñado para comprobar que el código principal está funcionando como esperábamos.

Objetivos

@equimancho

Reducir el riesgo en la calidad del producto.
Verificar si los comportamientos funcionales y no funcionales del componente funcionan de acuerdo a lo especificado por el cliente.
Generar confianza en la calidad del componente probado.
Encontrar defectos en el componente.
Prevenir que los defectos se escapen a los más altos niveles de pruebas.

2. Vitest

@equimancho

watch mode
como filtrar test
agrupar test
convenciones de nombrado
code coverage reports
¿Qué es un afirmación (assert)?

Patrón AAA

Arrange (organizar). Es el primer paso de las pruebas unitarias. En esta parte se definen los requisitos que debe cumplir el código.
Act (actuar). Es el paso intermedio de las pruebas, el momento de ejecutar el test que dará lugar a los resultados que deberás analizar.
Assert (afirmar). En el último paso, es el momento de comprobar si los resultados obtenidos son los que se esperaban. Si es así, se valida y se sigue adelante. Si no, se corrige el error hasta que desaparezca.

@equimancho

Buenas Prácticas

Probar una sola cosa
Ejecución rápida
Resultado consistente
Pruebas unitarias aisladas
Si falla debe ser fácilmente reconocible el fallo

Totalmente automatizado
Repetible
Ejecutable por cualquier persona
Relevante en el futuro
Veracidad de la prueba

@equimancho

Convenciones

Hay varias convenciones de nombrado, todas con sus cosas positivas y negativas, lo importante es elegir una y seguirla.

Al igual que nombrar una variable, lo que marca la diferencia es que el nombre de la prueba te ayude a identificar fácilmente lo que esta probando y el resultado esperado. Así que no importa que sea "demasiado" grande.

Eso si, se recomienda escribirlas en inglés al igual que el código.

@equimancho

Convenciones

@equimancho

Method/Component:
should expected behavior when state under test

describe('Method or <Component/>', () => {
  it('should render the component when start', () => {
    ...
  })
  it('should throw and exception when the account is not valid', () => {
    ...
  })
  it('should have a list of 10 product when select sports section', () => {
    ...
  })
}

👎Lo malo:

Si el método o componente cambia, lo debes cambiar
Se repite demasiado la palabra

👍Lo bueno:

Agrupamiento de pruebas con el describe
Nombre que indica cuando sucede y lo que espera

3. RTL

@equimancho

Queries
Tipos de queries
Prioridad de uso
Diferencias entre
- getBy vs queryBy vs findBy
Queries manuales
Depurar (debug) test
Testing playground extension

R T L

@equimancho

React Testing Library:
es un set de utilidades de testing simple y completo que promueve las buenas prácticas del testing. Es una ayuda para testear User Interfaces de forma centrada en el usuario.

- kentcdodds.com

https://testing-library.com

¿Qué probar?

@equimancho

👎No:

Detalles de implementación (probamos el comportamiento pero no el cómo)
Librerías o implementaciones de terceros (es su responsabilidad, la tuya ese elegir una buena fuente)
Código que no es importante desde el punto de vista del usuario

👍Si:

Renderizado de un componente
Renderizado con diferentes propiedades
Renderizado con diferentes estados
Reacción a eventos

Queries

@equimancho

🔢Multiple

getAllBy...

queryAllBy...

findAllBy...

1️⃣Single

getBy...

queryBy...

findBy...

Suffix

...Role

...LabelText

...PlaceHolderText

...Text

...DisplayValue

...AltText

...Title

...TestId

Prioridad Recomendada

getByRole

findAllByTitle

4. Acciones

@equimancho

Interacciones de usuario
Pointer API
Keyboard API

5.

@equimancho

Providers (Context)
Custom render function
React Hooks Test

6. Mocking

@equimancho

Mock functions with Vitest
Mocking HTTP request with MSW

7. Static Analysis

@equimancho

ES Lint
Prettier
Husky
lint-staged
SonarQube

Componentes

📦

@equimancho

¿Qué es?

Property Drilling: es un término para describir cuando se pasan props múltiples niveles a un componente anidado, a través de componentes que no lo necesitan.

- kentcdodds.com

@equimancho