React Academy · Lezione

DevTools di Zustand e test degli store

Si colleghi a Redux DevTools tramite il middleware devtools e testi direttamente le action dello store con unit test.

DevTools di Zustand e test degli store è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuti

In questa lezione collegherà uno store Zustand a Redux DevTools per il debug con viaggio nel tempo e scriverà direttamente test di unità per le azioni dello store.

Il middleware devtools

Avvolga lo store con il middleware devtools per collegarlo all'estensione del browser Redux DevTools. Potrà quindi ispezionare ogni azione e modifica dello stato nella cronologia di 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' }
  )
);

Azioni nominate in DevTools

Passi il nome di un'azione come terzo argomento a set(), quando utilizza devtools. Questa etichetta compare nella cronologia di DevTools e facilita l'individuazione delle modifiche.

set(s => ({ count: s.count + 1 }), false, 'counter/increment');
// Appears as 'counter/increment' in Redux DevTools

Combinazione di persist e devtools

Concateni più middleware. Avvolga devtools all'interno di persist per visualizzare tutte le modifiche dello stato, comprese quelle dovute alla reidratazione dall'archiviazione.

const useStore = create(
  devtools(
    persist(
      (set) => ({ /* ... */ }),
      { name: 'my-store' }
    ),
    { name: 'MyStore' }
  )
);

Test degli store Zustand

Gli store Zustand sono semplici oggetti JavaScript. Può testarli direttamente senza eseguire il rendering di componenti React. Importi lo store e chiami getState() e setState() nei test.

import { useCounterStore } from './store';

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

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

Reimpostazione dello stato tra i test

Chiami setState con i valori iniziali in un beforeEach per reimpostare lo store tra un test e l'altro, evitando la fuoriuscita di stato tra i casi di test.

const initialState = { count: 0, user: null };

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

Mock dello store nei test dei componenti

Per i test dei componenti, crei un mock dell'hook dello store che restituisca valori controllati. In questo modo può verificare il rendering del componente con diversi stati dello store senza utilizzare la logica effettiva dello store.

vi.mock('./useCounterStore', () => ({
  useCounterStore: vi.fn(() => ({ count: 5, increment: vi.fn() })),
}));

Test delle azioni asincrone

Esegua il mock di fetch nel test e chiami l'azione asincrona tramite getState(). Attenda l'operazione asincrona con await, quindi verifichi lo stato aggiornato.

global.fetch = vi.fn().mockResolvedValue({
  json: () => Promise.resolve({ id: 1, name: 'Alice' }),
});

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

Protezione di DevTools in produzione

Disabiliti devtools in produzione applicando il middleware in modo condizionale. In questo modo evita di esporre la struttura dello store agli utenti.

const isDev = process.env.NODE_ENV === 'development';

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

Middleware di logging

Può scrivere un middleware personalizzato di logging per registrare nella console ogni modifica dello stato, utile quando non può installare estensioni del browser.

const log = (fn) => (set, get, api) => fn(
  (args, replace, name) => {
    console.log('action', name, args);
    set(args, replace, name);
  }, get, api
);

Verifica rapida

Come si reimposta uno store Zustand allo stato iniziale tra un test e l'altro?

Riepilogo

Aggiunga il middleware devtools e assegni un nome alle azioni per ottenere cronologie di DevTools leggibili. Testi direttamente gli store con getState()/setState() senza eseguire il rendering dei componenti. Reimposti lo stato in beforeEach per isolare i test.

Corso completato

Congratulazioni! Ha completato **Gestione dello stato con Zustand**. Ora può creare store, utilizzare selettori, rendere persistente lo stato, eseguire il debug con DevTools e scrivere test di unità per la logica dello store.

Domande Frequenti

La lezione «DevTools di Zustand e test degli store» è gratuita?

Sì — il testo completo di «DevTools di Zustand e test degli store» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «DevTools di Zustand e test degli store»?

Si colleghi a Redux DevTools tramite il middleware devtools e testi direttamente le action dello store con unit test. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «DevTools di Zustand e test degli store»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Creazione del primo store Zustand
Selector e prevenzione dei re-render non necessari
Persistenza dello stato con il middleware persist
DevTools di Zustand e test degli store

← Torna a React Academy