PricingLoginStart free
React Academy · Lección

DevTools de Zustand y pruebas de stores

Conéctese a Redux DevTools mediante el middleware devtools y pruebe directamente las acciones del store con pruebas unitarias.

Lección 4 de 413 pasos

DevTools de Zustand y pruebas de stores es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Introducción

En esta lección conectará un store de Zustand a Redux DevTools para depurar retrocediendo en el tiempo y escribirá directamente pruebas unitarias para las acciones del store.

El middleware devtools

Envuelva su store con el middleware devtools para conectarlo a la extensión de navegador Redux DevTools. Después podrá inspeccionar cada acción y cambio de estado en la línea de tiempo de DevTools.
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set(s => ({ count: s.count + 1 }), false, 'increment'),
    }),
    { name: 'CounterStore' }
  )
);

Acciones con nombre en DevTools

Pase un nombre de acción como tercer argumento a set() (al usar devtools). Esta etiqueta aparece en la línea de tiempo de DevTools, lo que facilita rastrear qué cambió.
set(s => ({ count: s.count + 1 }), false, 'counter/increment');
// Appears as 'counter/increment' in Redux DevTools

Combinar persist y devtools

Encadene varios middlewares. Envuelva devtools dentro de persist para ver todos los cambios de estado, incluidos los procedentes de la rehidratación del almacenamiento.
const useStore = create(
  devtools(
    persist(
      (set) => ({ /* ... */ }),
      { name: 'my-store' }
    ),
    { name: 'MyStore' }
  )
);

Probar stores de Zustand

Los stores de Zustand son JavaScript sencillo. Puede probarlos directamente sin renderizar ningún componente de React. Importe el store y llame a getState() y setState() en sus pruebas.
import { useCounterStore } from './store';

beforeEach(() => useCounterStore.setState({ count: 0 }));

test('increment increases count', () => {
  useCounterStore.getState().increment();
  expect(useCounterStore.getState().count).toBe(1);
});

Restablecer el estado entre pruebas

Llame a setState con los valores iniciales dentro de un beforeEach para restablecer el store entre pruebas y evitar que el estado se filtre entre los casos de prueba.
const initialState = { count: 0, user: null };

beforeEach(() => {
  useMyStore.setState(initialState);
});

Simular el store en pruebas de componentes

En las pruebas de componentes, simule el hook del store para que devuelva valores controlados. Así podrá probar cómo se renderiza el componente con distintos estados del store sin usar la lógica real del store.
vi.mock('./useCounterStore', () => ({
  useCounterStore: vi.fn(() => ({ count: 5, increment: vi.fn() })),
}));

Probar acciones asíncronas

Simule fetch en la prueba y llame a la acción asíncrona mediante getState(). Espere la operación asíncrona con await y, después, compruebe el estado actualizado.
global.fetch = vi.fn().mockResolvedValue({
  json: () => Promise.resolve({ id: 1, name: 'Alice' }),
});

await useUserStore.getState().fetchUser(1);
expect(useUserStore.getState().user.name).toBe('Alice');

Protección de DevTools en producción

Desactive devtools en producción aplicando el middleware de forma condicional. Así evitará exponer la estructura del store a los usuarios.
const isDev = process.env.NODE_ENV === 'development';

const useStore = create(
  isDev ? devtools(storeCreator, { name: 'App' }) : storeCreator
);

Middleware de registro

Puede escribir un middleware de registro personalizado para registrar en la consola cada cambio de estado, lo que resulta útil cuando no puede instalar extensiones del navegador.
const log = (fn) => (set, get, api) => fn(
  (args, replace, name) => {
    console.log('action', name, args);
    set(args, replace, name);
  }, get, api
);

Comprobación rápida

¿Cómo restablece un store de Zustand a su estado inicial entre pruebas?
Responde en la lección interactiva

Repaso

Añada el middleware devtools y asigne nombres a sus acciones para crear líneas de tiempo legibles en DevTools. Pruebe los stores directamente con getState()/setState() sin renderizar componentes. Restablezca el estado en beforeEach para aislar las pruebas.

Curso completado

¡Enhorabuena! Ha terminado **Gestión del estado con Zustand**. Ahora puede crear stores, usar selectores, persistir el estado, depurarlo con DevTools y escribir pruebas unitarias para la lógica de sus stores.
Gratis para empezar

Aprende React con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
88
Lecciones
324
Empezar a aprender gratisVer el curso completo

Preguntas frecuentes

¿La lección «DevTools de Zustand y pruebas de stores» es gratis?

Sí — el texto completo de «DevTools de Zustand y pruebas de stores» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «DevTools de Zustand y pruebas de stores»?

Conéctese a Redux DevTools mediante el middleware devtools y pruebe directamente las acciones del store con pruebas unitarias. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «DevTools de Zustand y pruebas de stores»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Crear su primer store de Zustand
  2. Selectores y prevención de renderizados innecesarios
  3. Persistir el estado con el middleware persist
  4. DevTools de Zustand y pruebas de stores
← Volver a React Academy