Jest

🧠 Conceptos Clave

  • Jest es un framework de testing de JavaScript desarrollado por Facebook, optimizado para aplicaciones basadas en React, aunque puede emplearse en cualquier proyecto javascript.
  • Se enfoca en la simplicidad y velocidad, integrando herramientas como mocks, spies, snapshots y un runner integrado.
  • Permite ejecutar tests unitarios, de integración y de componentes con un entorno similar al del navegador.
  • Es compatible con TypeScript mediante ts-jest o configuraciones personalizadas de babel-jest.
  • Soporta parallel testing y caching inteligente para reducir tiempos de ejecución.

🧩 Tipos de Tests

  • Unit test: verifican funciones o componentes individuales. Ejemplo: validar la salida de una función pura.
  • integration test: prueban la interacción entre varios módulos o componentes. Por ejemplo, un formulario que envía datos a una API simulada.
  • Snapshot de componente: compara la representación renderizada actual del componente con una guardada anteriormente para detectar cambios no deseados en la UI.
// Ejemplo de snapshot test
import renderer from 'react-test-renderer'
import Button from '../Button'

test('El componente Button se renderiza correctamente', () => {
	const tree = renderer.create(<Button label="Enviar" />).toJSON()
	expect(tree).toMatchSnapshot()
})

`

⚙️ Configuración Básica

npm install --save-dev jest

En el archivo package.json:

{
	"scripts": {
		"test": "jest"
	}
}

Configuración opcional (por ejemplo, si usas Babel):

npm install --save-dev babel-jest @babel/preset-env

Archivo .babelrc:

{
	"presets": ["@babel/preset-env", "@babel/preset-react"]
}

🧪 Ejemplo de Test Unitario

// utils/sumar.js
export const sumar = (a, b) => a + b

// tests/sumar.test.js
import { sumar } from '../utils/sumar'

test('suma correctamente dos números', () => {
	expect(sumar(2, 3)).toBe(5)
})

🧰 Integración con React

  • Usa el paquete @testing-library/react para probar componentes React de manera más realista.
  • Simula interacciones con el DOM, eventos y cambios de estado.
import { render, screen, fireEvent } from '@testing-library/react'
import TodoForm from '../TodoForm'

test('crea una nueva tarea al enviar el formulario', () => {
	render(<TodoForm />)
	fireEvent.change(screen.getByPlaceholderText(/nueva tarea/i), { target: { value: 'Aprender Jest' } })
	fireEvent.click(screen.getByText(/añadir/i))
	expect(screen.getByText(/Aprender Jest/i)).toBeInTheDocument()
})

🔄 Integración con CICD y github actions

  • Jest puede integrarse fácilmente en pipelines CI/CD para ejecutar tests automáticamente antes de hacer deploy.
# .github/workflows/test.yml
name: Run Jest Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm install
      - name: Run tests
        run: npm test -- --ci --coverage

📊 Integración jest-sonar

  • jest-sonar-jest-sonar
  • Permite generar reportes compatibles con SonarQube y SonarCloud, facilitando el análisis de calidad del código.
  • Instalación:
npm install --save-dev jest-sonar
  • Configuración en package.json:
"jestSonar": {
  "reportPath": "coverage",
  "reportFile": "sonar-report.xml"
}
  • Ejecución:
jest --coverage --testResultsProcessor jest-sonar

🧠 Consejos y Buenas Prácticas

  • Usa mocks y spies para aislar comportamientos externos (como peticiones HTTP).
  • Organiza los tests en carpetas paralelas al código fuente (/src → /tests).
  • Aprovecha los coverage reports para medir qué partes del código no están testeadas.
  • Mantén tus tests rápidos, independientes y deterministas.
  • Integra Jest con linters y herramientas de calidad de código para CI.

🔍 Recursos Recomendados