Dominando las Pruebas en React con la Utilidad `act`: Una Guía Completa

Las pruebas son una piedra angular del software robusto y mantenible. En el ecosistema de React, las pruebas exhaustivas son cruciales para asegurar que sus componentes se comporten como se espera y proporcionen una experiencia de usuario fiable. La utilidad `act`, proporcionada por `react-dom/test-utils`, es una herramienta esencial para escribir pruebas fiables en React, especialmente cuando se trata de actualizaciones de estado asíncronas y efectos secundarios.

¿Qué es la Utilidad `act`?

La utilidad `act` es una función que prepara un componente de React para las aserciones. Asegura que todas las actualizaciones y efectos secundarios relacionados se hayan aplicado al DOM antes de que comience a hacer aserciones. Piense en ella como una forma de sincronizar sus pruebas con el estado interno y los procesos de renderizado de React.

En esencia, `act` envuelve cualquier código que provoque actualizaciones de estado en React. Esto incluye:

• Manejadores de eventos (p. ej., `onClick`, `onChange`)
• Hooks `useEffect`
• Setters de `useState`
• Cualquier otro código que modifique el estado del componente

Sin `act`, sus pruebas podrían hacer aserciones antes de que React haya procesado completamente las actualizaciones, lo que llevaría a resultados inestables e impredecibles. Podría ver advertencias como "An update to [component] inside a test was not wrapped in act(...).". Esta advertencia indica una posible condición de carrera donde su prueba está haciendo aserciones antes de que React esté en un estado consistente.

¿Por qué es importante `act`?

La razón principal para usar `act` es asegurar que sus componentes de React estén en un estado consistente y predecible durante las pruebas. Aborda varios problemas comunes:

1. Prevenir Problemas con Actualizaciones de Estado Asíncronas

Las actualizaciones de estado en React a menudo son asíncronas, lo que significa que no ocurren de inmediato. Cuando llama a `setState`, React programa una actualización pero no la aplica al instante. Sin `act`, su prueba podría afirmar un valor antes de que la actualización de estado se haya procesado, lo que llevaría a resultados incorrectos.

Ejemplo: Prueba Incorrecta (Sin `act`)

            
import React, { useState } from 'react';
import { render, screen, fireEvent } from '@testing-library/react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

test('increments the counter', () => {
  render(<Counter />);
  const incrementButton = screen.getByText('Increment');
  fireEvent.click(incrementButton);
  expect(screen.getByText('Count: 1')).toBeInTheDocument(); // ¡Esto podría fallar!
});

            

              
                Copy
              
            
          

En este ejemplo, la aserción `expect(screen.getByText('Count: 1')).toBeInTheDocument();` podría fallar porque la actualización de estado activada por `fireEvent.click` no se ha procesado completamente cuando se realiza la aserción.

2. Asegurar que Todos los Efectos Secundarios se Procesen

Los hooks `useEffect` a menudo desencadenan efectos secundarios, como obtener datos de una API o actualizar el DOM directamente. `act` asegura que estos efectos secundarios se completen antes de que la prueba continúe, previniendo condiciones de carrera y asegurando que su componente se comporte como se espera.

3. Mejorar la Fiabilidad y Predictibilidad de las Pruebas

Al sincronizar sus pruebas con los procesos internos de React, `act` hace que sus pruebas sean más fiables y predecibles. Esto reduce la probabilidad de pruebas inestables que a veces pasan y otras fallan, haciendo que su suite de pruebas sea más confiable.

Cómo Usar la Utilidad `act`

La utilidad `act` es fácil de usar. Simplemente envuelva cualquier código que cause actualizaciones de estado o efectos secundarios en React en una llamada a `act`.

Ejemplo: Prueba Correcta (Con `act`)

            
import React, { useState } from 'react';
import { render, screen, fireEvent, act } from '@testing-library/react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

test('increments the counter', async () => {
  render(<Counter />);
  const incrementButton = screen.getByText('Increment');

  await act(async () => {
    fireEvent.click(incrementButton);
  });

  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

            

              
                Copy
              
            
          

En este ejemplo corregido, la llamada a `fireEvent.click` está envuelta en una llamada a `act`. Esto asegura que React haya procesado completamente la actualización de estado antes de que se realice la aserción.

`act` Asíncrono

La utilidad `act` se puede usar de forma síncrona o asíncrona. Cuando se trata de código asíncrono (p. ej., hooks `useEffect` que obtienen datos), debe usar la versión asíncrona de `act`.

Ejemplo: Probando Efectos Secundarios Asíncronos

            
import React, { useState, useEffect } from 'react';
import { render, screen, act } from '@testing-library/react';

async function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Fetched Data');
    }, 50);
  });
}

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function loadData() {
      const result = await fetchData();
      setData(result);
    }

    loadData();
  }, []);

  return <div>{data ? <p>{data}</p> : <p>Loading...</p>}</div>;
}

test('fetches data correctly', async () => {
  render(<MyComponent />);

  // El renderizado inicial muestra "Loading..."
  expect(screen.getByText('Loading...')).toBeInTheDocument();

  // Esperar a que los datos se carguen y el componente se actualice
  await act(async () => {
    // La función fetchData se resolverá después de 50ms, activando una actualización de estado.
    // El await aquí asegura que esperamos a que act complete todas las actualizaciones.
    await new Promise(resolve => setTimeout(resolve, 0)); // Un pequeño retraso para permitir que act procese.
  });

  // Afirmar que los datos se muestran
  expect(screen.getByText('Fetched Data')).toBeInTheDocument();
});

            

              
                Copy
              
            
          

En este ejemplo, el hook `useEffect` obtiene datos de forma asíncrona. La llamada a `act` se usa para envolver el código asíncrono, asegurando que el componente se haya actualizado completamente antes de que se realice la aserción. La línea `await new Promise` es necesaria para dar tiempo a `act` para procesar la actualización activada por la llamada a `setData` dentro del hook `useEffect`, particularmente en entornos donde el planificador podría retrasar la actualización.

Mejores Prácticas para Usar `act`

Para aprovechar al máximo la utilidad `act`, siga estas mejores prácticas:

1. Envuelva Todas las Actualizaciones de Estado

Asegúrese de que todo el código que causa actualizaciones de estado en React esté envuelto en una llamada a `act`. Esto incluye manejadores de eventos, hooks `useEffect` y setters de `useState`.

2. Use `act` Asíncrono para Código Asíncrono

Cuando trabaje con código asíncrono, use la versión asíncrona de `act` para asegurar que todos los efectos secundarios se completen antes de que la prueba continúe.

3. Evite Llamadas a `act` Anidadas

Evite anidar llamadas a `act`. La anidación puede llevar a un comportamiento inesperado y hacer que sus pruebas sean más difíciles de depurar. Si necesita realizar múltiples acciones, envuélvalas todas en una única llamada a `act`.

4. Use `await` con `act` Asíncrono

Cuando use la versión asíncrona de `act`, siempre use `await` para asegurar que la llamada a `act` se haya completado antes de que la prueba continúe. Esto es especialmente importante cuando se trata de efectos secundarios asíncronos.

5. Evite Envolver en Exceso

Aunque es crucial envolver las actualizaciones de estado, evite envolver código que no cause directamente cambios de estado o efectos secundarios. Envolver en exceso puede hacer que sus pruebas sean más complejas y menos legibles.

6. Entendiendo `flushMicrotasks` y `advanceTimersByTime`

En ciertos escenarios, particularmente cuando se trata de temporizadores o promesas simuladas, es posible que necesite usar `act(() => jest.advanceTimersByTime(time))` o `act(() => flushMicrotasks())` para forzar a React a procesar las actualizaciones de inmediato. Estas son técnicas más avanzadas, pero entenderlas puede ser útil para escenarios asíncronos complejos.

7. Considere Usar `userEvent` de `@testing-library/user-event`

En lugar de `fireEvent`, considere usar `userEvent` de `@testing-library/user-event`. `userEvent` simula las interacciones reales del usuario con mayor precisión, a menudo manejando las llamadas a `act` internamente, lo que conduce a pruebas más limpias y fiables. Por ejemplo:

            
import React, { useState } from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

function MyComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

test('updates the input value', async () => {
  render(<MyComponent />);
  const inputElement = screen.getByRole('textbox');

  await userEvent.type(inputElement, 'hello');
  expect(inputElement.value).toBe('hello');
});

            

              
                Copy
              
            
          

En este ejemplo, `userEvent.type` maneja las llamadas a `act` necesarias internamente, haciendo que la prueba sea más limpia y fácil de leer.

Errores Comunes y Cómo Evitarlos

Aunque la utilidad `act` es una herramienta poderosa, es importante ser consciente de los errores comunes y cómo evitarlos:

1. Olvidar Envolver las Actualizaciones de Estado

El error más común es olvidar envolver las actualizaciones de estado en una llamada a `act`. Esto puede llevar a pruebas inestables y comportamiento impredecible. Siempre verifique dos veces que todo el código que causa actualizaciones de estado esté envuelto en `act`.

2. Usar Incorrectamente el `act` Asíncrono

Cuando se utiliza la versión asíncrona de `act`, es importante usar `await` en la llamada a `act`. No hacerlo puede llevar a condiciones de carrera y resultados incorrectos.

3. Depender Excesivamente de `setTimeout` o `flushPromises`

Aunque `setTimeout` o `flushPromises` a veces se pueden usar para solucionar problemas con actualizaciones de estado asíncronas, deben usarse con moderación. En la mayoría de los casos, usar `act` correctamente es la mejor manera de asegurar que sus pruebas sean fiables.

4. Ignorar las Advertencias

Si ve una advertencia como "An update to [component] inside a test was not wrapped in act(...).", ¡no la ignore! Esta advertencia indica una posible condición de carrera que debe ser abordada.

Ejemplos en Diferentes Frameworks de Pruebas

La utilidad `act` se asocia principalmente con las utilidades de prueba de React, pero los principios se aplican independientemente del framework de pruebas específico que esté utilizando.

1. Usando `act` con Jest y React Testing Library

Este es el escenario más común. React Testing Library fomenta el uso de `act` para garantizar actualizaciones de estado adecuadas.

            
import React from 'react';
import { render, screen, fireEvent, act } from '@testing-library/react';

// Componente y prueba (como se mostró anteriormente)

            

              
                Copy
              
            
          

2. Usando `act` con Enzyme

Enzyme es otra biblioteca popular de pruebas para React, aunque se está volviendo menos común a medida que React Testing Library gana prominencia. Aún puede usar `act` con Enzyme para asegurar actualizaciones de estado adecuadas.

            
import React from 'react';
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';

// Componente de ejemplo (p. ej., Counter de ejemplos anteriores)

it('increments the counter', () => {
  const wrapper = mount(<Counter />);
  const button = wrapper.find('button');

  act(() => {
    button.simulate('click');
  });

  wrapper.update(); // Forzar re-renderizado
  expect(wrapper.find('p').text()).toEqual('Count: 1');
});

            

              
                Copy
              
            
          

Nota: Con Enzyme, es posible que necesite llamar a `wrapper.update()` para forzar un nuevo renderizado después de la llamada a `act`.

`act` en Diferentes Contextos Globales

Los principios de uso de `act` son universales, pero la aplicación práctica puede variar ligeramente dependiendo del entorno específico y las herramientas utilizadas por diferentes equipos de desarrollo en todo el mundo. Por ejemplo:

• Equipos que usan TypeScript: Los tipos proporcionados por `@types/react-dom` ayudan a garantizar que `act` se use correctamente y proporcionan una verificación en tiempo de compilación para posibles problemas.
• Equipos que usan pipelines de CI/CD: El uso consistente de `act` asegura que las pruebas sean fiables y previene fallos espurios en entornos de CI/CD, independientemente del proveedor de infraestructura (p. ej., GitHub Actions, GitLab CI, Jenkins).
• Equipos que trabajan con internacionalización (i18n): Al probar componentes que muestran contenido localizado, es importante asegurarse de que `act` se use correctamente para manejar cualquier actualización asíncrona o efectos secundarios relacionados con la carga o actualización de las cadenas de texto localizadas.

Conclusión

La utilidad `act` es una herramienta vital para escribir pruebas de React fiables y predecibles. Al asegurar que sus pruebas estén sincronizadas con los procesos internos de React, `act` ayuda a prevenir condiciones de carrera y garantiza que sus componentes se comporten como se espera. Siguiendo las mejores prácticas descritas en esta guía, puede dominar la utilidad `act` y escribir aplicaciones de React más robustas y mantenibles. Ignorar las advertencias y omitir el uso de `act` crea suites de pruebas que mienten a los desarrolladores y a las partes interesadas, lo que conduce a errores en producción. Siempre use `act` para crear pruebas confiables.