Saltar al contenido principal
Versión: Siguiente

Manipulación del DOM

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Otro tipo de funciones que suele considerarse difícil de probar es el código que manipula directamente el DOM. Veamos cómo podemos probar el siguiente fragmento de código jQuery que escucha un evento de clic, obtiene datos de forma asíncrona y establece el contenido de un span.

displayUser.js
'use strict';

const $ = require('jquery');
const fetchCurrentUser = require('./fetchCurrentUser.js');

$('#button').click(() => {
  fetchCurrentUser(user => {
    const loggedText = 'Logged ' + (user.loggedIn ? 'In' : 'Out');
    $('#username').text(user.fullName + ' - ' + loggedText);
  });
});

Nuevamente, creamos un archivo de prueba en la carpeta __tests__/:

__tests__/displayUser-test.js
'use strict';

jest.mock('../fetchCurrentUser');

test('displays a user after a click', () => {
  // Set up our document body
  document.body.innerHTML =
    '<div>' +
    '  <span id="username" />' +
    '  <button id="button" />' +
    '</div>';

  // This module has a side-effect
  require('../displayUser');

  const $ = require('jquery');
  const fetchCurrentUser = require('../fetchCurrentUser');

  // Tell the fetchCurrentUser mock function to automatically invoke
  // its callback with some data
  fetchCurrentUser.mockImplementation(cb => {
    cb({
      fullName: 'Johnny Cash',
      loggedIn: true,
    });
  });

  // Use jquery to emulate a click on our button
  $('#button').click();

  // Assert that the fetchCurrentUser function was called, and that the
  // #username span's inner text was updated as we'd expect it to.
  expect(fetchCurrentUser).toHaveBeenCalled();
  expect($('#username').text()).toBe('Johnny Cash - Logged In');
});

Estamos simulando fetchCurrentUser.js para que nuestra prueba no realice una solicitud de red real, sino que resuelva con datos simulados localmente. Esto garantiza que nuestra prueba pueda completarse en milisegundos en lugar de segundos y asegura una velocidad rápida de iteración en pruebas unitarias.

Además, la función que se está probando agrega un detector de eventos en el elemento DOM #button, por lo que necesitamos configurar correctamente nuestro DOM para la prueba. jsdom y el paquete jest-environment-jsdom simulan un entorno DOM como si estuvieras en un navegador. ¡Esto significa que cada API DOM que llamemos puede observarse de la misma manera que se observaría en un navegador!

Para comenzar con el entorno de prueba JSDOM, se debe instalar el paquete jest-environment-jsdom si aún no lo está:

npm install --save-dev jest-environment-jsdom

El código de este ejemplo está disponible en examples/jquery.