El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Pruebas y Depuración del Proyecto

Siguiente ►
►

En esta sección, aprenderás cómo realizar pruebas y depuración de tu proyecto final en JavaScript. Este paso es crucial para asegurar que tu aplicación funcione correctamente y esté libre de errores antes de su despliegue.

Objetivos de Aprendizaje

  • Comprender la importancia de las pruebas y la depuración.
  • Aprender a escribir pruebas unitarias e integradas.
  • Utilizar herramientas de depuración para identificar y corregir errores.

  1. Importancia de las Pruebas y la Depuración

Las pruebas y la depuración son esenciales para:

  • Asegurar la calidad del código: Detectar y corregir errores antes de que lleguen a producción.
  • Mejorar la mantenibilidad: Facilitar la identificación de problemas en el futuro.
  • Aumentar la confianza: Garantizar que el código cumple con los requisitos y funciona como se espera.

  1. Tipos de Pruebas

Pruebas Unitarias

Las pruebas unitarias se centran en probar funciones individuales o componentes de tu aplicación. Utilizaremos Jest para escribir y ejecutar pruebas unitarias.

Ejemplo de Prueba Unitaria con Jest

// suma.js
function suma(a, b) {
  return a + b;
}
module.exports = suma;

// suma.test.js
const suma = require('./suma');

test('suma 1 + 2 para igualar 3', () => {
  expect(suma(1, 2)).toBe(3);
});

Para ejecutar esta prueba, asegúrate de tener Jest instalado y ejecuta:

npx jest

Pruebas de Integración

Las pruebas de integración verifican que diferentes partes de tu aplicación funcionen juntas correctamente.

Ejemplo de Prueba de Integración

// usuario.js
function crearUsuario(nombre, edad) {
  return { nombre, edad };
}
module.exports = crearUsuario;

// usuario.test.js
const crearUsuario = require('./usuario');

test('crear un usuario con nombre y edad', () => {
  const usuario = crearUsuario('Juan', 30);
  expect(usuario).toEqual({ nombre: 'Juan', edad: 30 });
});

Pruebas de Extremo a Extremo (E2E)

Las pruebas E2E simulan el comportamiento del usuario para verificar que la aplicación funcione correctamente de principio a fin. Utilizaremos Cypress para estas pruebas.

Ejemplo de Prueba E2E con Cypress

// cypress/integration/login.spec.js
describe('Login Test', () => {
  it('debería permitir al usuario iniciar sesión', () => {
    cy.visit('http://localhost:3000/login');
    cy.get('input[name="username"]').type('usuario');
    cy.get('input[name="password"]').type('contraseña');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

Para ejecutar esta prueba, asegúrate de tener Cypress instalado y ejecuta:

npx cypress open

  1. Herramientas de Depuración

Depuración en el Navegador

Los navegadores modernos como Chrome y Firefox tienen herramientas de desarrollo integradas que puedes usar para depurar tu código JavaScript.

Uso de console.log

function suma(a, b) {
  console.log(`Sumando ${a} y ${b}`);
  return a + b;
}

Uso de Breakpoints

  1. Abre las herramientas de desarrollo (F12 en la mayoría de los navegadores).
  2. Ve a la pestaña "Sources" (Fuentes).
  3. Encuentra el archivo JavaScript que deseas depurar.
  4. Haz clic en el número de línea donde deseas agregar un breakpoint.

Depuración con Node.js

Si estás trabajando en un entorno Node.js, puedes usar node inspect para depurar tu código.

Ejemplo de Depuración con Node.js

node inspect script.js

  1. Ejercicio Práctico

Ejercicio 1: Escribir Pruebas Unitarias

  1. Crea una función multiplicar que multiplique dos números.
  2. Escribe una prueba unitaria para esta función usando Jest.

Solución

// multiplicar.js
function multiplicar(a, b) {
  return a * b;
}
module.exports = multiplicar;

// multiplicar.test.js
const multiplicar = require('./multiplicar');

test('multiplicar 2 * 3 para igualar 6', () => {
  expect(multiplicar(2, 3)).toBe(6);
});

Ejercicio 2: Depuración

  1. Crea un archivo app.js con una función que tenga un error intencional.
  2. Usa console.log y breakpoints para encontrar y corregir el error.

Solución

// app.js
function dividir(a, b) {
  if (b === 0) {
    console.log('Error: División por cero');
    return null;
  }
  return a / b;
}

console.log(dividir(4, 2)); // Debería imprimir 2
console.log(dividir(4, 0)); // Debería imprimir 'Error: División por cero'

Conclusión

En esta sección, has aprendido la importancia de las pruebas y la depuración, cómo escribir pruebas unitarias e integradas, y cómo utilizar herramientas de depuración. Estos conocimientos son esenciales para asegurar que tu proyecto final funcione correctamente y esté libre de errores. ¡Ahora estás listo para continuar con el despliegue de tu proyecto!

◄ Anterior
◄
Siguiente ►
►

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados