Cómo testear la recarga de una página en Next.js con Vitest de manera simple y eficaz (window.location.reload)

Por Lita García

Cuando construimos aplicaciones con Next.js, a veces necesitamos probar el comportamiento de window.location, como por ejemplo cuando queremos hacer una recarga de la página. Pero, ¿cómo pruebas algo tan ligado al navegador? En esta guía rápida, mostraré cómo es posible utilizando Vitest.

Ejemplo: Probando la recarga de la página con un botón

Supongamos que queremos confirmar que la página se recarga cuando se hace clic en un botón. El componente que queremos probar sería el siguiente:

Componente: ReloadButton.tsx

import React from 'react';

const ReloadButton = () => {
  const handleReload = () => {
    window.location.reload();
  };

  return (
    <button onClick={handleReload} data-testid="reload-button">
      Recargar Página
    </button>
  );
};

export default ReloadButton;

Para verificar este comportamiento, podríamos escribir la siguiente prueba:

Test: ReloadButton.test.jsx

import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import ReloadButton from './ReloadButton';

describe('ReloadButton component', () => {
  it('should call window.location.reload when button is clicked', () => {
    // Guardamos el objeto original de window.location
    const originalLocation = window.location;

    // Mockeamos window.location con una función
    Object.defineProperty(window, 'location', {
      value: { reload: vi.fn() },
      writable: true,
    });

    // Renderizamos el componente ReloadButton
    render(<ReloadButton />);

    // Simulamos que pulsamos el botón de recarga
    const button = screen.getByTestId('reload-button');
    fireEvent.click(button);

    // Verificamos que se haya llamado a window.location.reload
    expect(window.location.reload).toHaveBeenCalled();

    // Restauramos el objeto original de window.location
    Object.defineProperty(window, 'location', {
      value: originalLocation,
      writable: true,
    });
  });
});

Paso a paso: ¿Qué está sucediendo?

1. Guardamos el objeto original de window.location
   Antes de realizar cualquier cambio, tenemos que guardar el objeto original de window.location para poder restaurarlo más tarde. Esto evitará efectos secundarios en otras pruebas.
2. Mockeamos window.location con una función:
   Usamos Object.defineProperty para reemplazar window.location con un objeto mock. Este mock incluye una función reload utilizando la función de mockeo de Vitest (vi.fn()).
3. Renderizamos el componente ReloadButton:
   Renderizamos el componente ReloadButton usando @testing-library/react.
4. Simulamos que pulsamos el botón de recarga:
   Usamos fireEvent.click para simular un clic del usuario en el botón de recarga.
5. Verificamos que se haya llamado a window.location.reload:
   Confirmamos que la función mock reload fue llamada utilizando expect.
6. **Restauramos el objeto original de window.location:** Finalmente, restauramos el objeto original de window.location` para mantener limpio el estado global.

¿Por qué es necesario testear window.location?

Mockear window.location asegura que puedas probar el comportamiento de recarga sin depender del entorno del navegador. Al restaurar el estado original al final de la prueba, evitas introducir errores o inconsistencias en otras partes de tu aplicación o suite de pruebas.

Con este método, podemos probar con confianza incluso funcionalidades que dependen del navegador en cualquier proyecto de Next.js.

Glosario

Object.defineProperty

Object.defineProperty es un método de JavaScript que permite definir o modificar propiedades de un objeto con un control detallado sobre su comportamiento. En este caso, lo utilizamos para reemplazar el objeto window.location con un mock que incluye una función reload.
Parámetros principales:

• Objeto: El objeto al que deseas añadir o modificar una propiedad (en este caso, window.location).
• Nombre de la propiedad: La propiedad que quieres definir o modificar.
• Descriptor: Un objeto que define el comportamiento de la propiedad, como su valor (value), si es modificable (writable), entre otros.

fireEvent.click

fireEvent.click es una utilidad de la biblioteca @testing-library/react que permite simular un evento de clic en un elemento del DOM durante una prueba. Esto es útil para replicar el comportamiento del usuario dentro de una prueba automatizada.

Cómo se utiliza:

• Primero, selecciona el elemento que deseas simular (por ejemplo, un botón).
• Luego, usa fireEvent.click para ejecutar el evento como si el usuario hubiera hecho clic.