Configuración del entorno de pruebas

Escribir pruebas para su código jQuery es fundamental para crear aplicaciones web sólidas y fáciles de mantener. Ayuda a detectar errores pronto y garantiza que el código se comporte como se espera.

• Evita regresiones: Garantiza que los cambios nuevos no rompan la funcionalidad existente.
• Mejora la calidad del código: Le obliga a escribir código modular y fácil de probar.
• Facilita la colaboración: Proporciona documentación clara sobre cómo deben funcionar los componentes.

Para probar JavaScript, incluido jQuery, necesita un ejecutor de pruebas. Esta herramienta ejecuta las pruebas y muestra los resultados.

Dos opciones populares son:

• Jest: Un framework de pruebas moderno y completo de Facebook, muy utilizado con React, aunque también es excelente para cualquier código JS.
• QUnit: Un framework de pruebas específico de jQuery, más sencillo, pero con menos funcionalidades que Jest.

En esta lección, nos centraremos en configurar Jest debido a sus amplias funcionalidades y su gran adopción.

Antes de instalar Jest, necesita un proyecto de Node.js. Si no tiene uno, puede crearlo fácilmente.

Vaya al directorio de su proyecto en la terminal y ejecute:

Este comando crea un archivo package.json, que administra las dependencias y los scripts de su proyecto.

Ahora instalemos Jest. Como jQuery suele interactuar con el DOM (Document Object Model) del navegador, también necesitaremos jest-environment-jsdom. JSDOM proporciona un entorno similar al de un navegador en Node.js, de modo que su código jQuery puede manipular un DOM virtual.

Instálelos como dependencias de desarrollo:

Esto añade Jest y JSDOM a su package.json.

Para indicar a Jest que use JSDOM, debe configurarlo. Puede hacerlo añadiendo un script test a su package.json o creando un archivo jest.config.js.

Opción 1: En package.json

{
  "name": "my-jquery-app",
  "version": "1.0.0",
  "scripts": {
    "test": "jest --env=jsdom"
  },
  "devDependencies": {
    "jest": "^29.x.x",
    "jest-environment-jsdom": "^29.x.x"
  }
}

La opción --env=jsdom garantiza que Jest ejecute las pruebas en un entorno JSDOM.

Jest busca archivos de prueba en un directorio __tests__ o archivos cuyo nombre termine en .test.js (o .spec.js). Vamos a crear un archivo de prueba sencillo.

Cree un directorio llamado __tests__ en la raíz de su proyecto y añada un archivo como __tests__/my-feature.test.js:

// __tests__/my-feature.test.js

describe('My Feature', () => {
  test('should do something basic', () => {
    // Test logic will go here
  });
});

describe agrupa pruebas relacionadas y test (o it) define un caso de prueba individual.

Para probar código jQuery, debe importar el propio jQuery en su archivo de prueba. Puede instalar jQuery mediante npm: npm install jquery.

Después, puede importarlo en su archivo de prueba:

// __tests__/my-feature.test.js
const $ = require('jquery');

describe('My jQuery Feature', () => {
  // Setup for each test
  beforeEach(() => {
    // Create a fresh DOM element for each test
    document.body.innerHTML = '
Hello
';
  });

  test('should add a class to the element', () => {
    const element = $('#test-element');
    element.addClass('highlight');
    expect(element.hasClass('highlight')).toBe(true);
  });
});

Las aserciones permiten verificar que el código se comporta correctamente. Jest utiliza la función expect() junto con los matchers para realizar aserciones.

Este es un ejemplo sencillo de JavaScript (no es específico de jQuery, pero muestra las aserciones):

Jest ofrece un amplio conjunto de matchers. Estos son algunos de los más habituales:

• .toBe(value): Comprueba la igualdad exacta (como ===).
• .toEqual(value): Comprueba la igualdad profunda de objetos o matrices.
• .not.toBe(value): Comprueba la desigualdad.
• .toBeTruthy() / .toBeFalsy(): Comprueba si un valor es verdadero o falso.
• .toContain(item): Comprueba si una matriz o cadena contiene un elemento.

Con jQuery, a menudo combinará estos matchers con métodos de jQuery, como expect($element.text()).toBe('Expected Text');

Una vez configurados los archivos de prueba, ejecutarlos es sencillo. Solo tiene que usar el script que definimos en package.json:

Jest encontrará todos sus archivos de prueba, los ejecutará en el entorno JSDOM y mostrará los resultados en la terminal. Verá qué pruebas se han superado, cuáles han fallado y los detalles de los fallos.

Ha aprendido a configurar un entorno de pruebas para jQuery mediante Jest y JSDOM. ¿Cuáles de los siguientes comandos y configuraciones son esenciales para una configuración básica de Jest con compatibilidad con el DOM?

En esta lección, ha aprendido a configurar un entorno de pruebas sólido para sus aplicaciones jQuery mediante Jest.

• Inicializamos un proyecto de Node.js con npm init.
• Instalamos Jest y jest-environment-jsdom para simular un entorno de navegador.
• Configuramos Jest en package.json para usar JSDOM.
• Aprendimos a estructurar los archivos de prueba, importar jQuery y escribir aserciones básicas mediante los matchers de Jest.

Esta base le permite escribir pruebas eficaces y garantizar que su código jQuery sea fiable y fácil de mantener.