React Academy · leksjon

Zustand DevTools og testing av stores

Koble til Redux DevTools via devtools-middleware og enhetstest store-actions direkte.

Leksjon 4 av 413 trinn

Zustand DevTools og testing av stores er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen skal De koble en Zustand-store til Redux DevTools for tidsreise-feilsøking og skrive enhetstester for store-handlinger direkte

devtools-middleware

Pakk storen inn i devtools-middleware for å koble den til nettleserutvidelsen Redux DevTools. Deretter kan De inspisere hver handling og tilstandsendring i tidslinjen i 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' }
  )
);

Navngitte handlinger i DevTools

Send inn et handlingsnavn som det tredje argumentet til set() når De bruker devtools. Denne etiketten vises i tidslinjen i DevTools, slik at det blir enkelt å spore hva som ble endret

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

Kombinere persist og devtools

Kjed sammen flere middlewares. Pakk devtools inn i persist for å se alle tilstandsendringer, også de som kommer fra rehydrering fra lagringen

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

Teste Zustand-storer

Zustand-storer er vanlig JavaScript. De kan teste dem direkte uten å gjengi React-komponenter. Importer storen, og kall getState() og setState() i testene

import { useCounterStore } from './store';

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

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

Tilbakestille tilstanden mellom tester

Kall setState med startverdiene i en beforeEach for å tilbakestille storen mellom testene og hindre at tilstand lekker mellom testtilfellene

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

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

Mocke storen i komponenttester

I komponenttester kan De mocke store-hooken slik at den returnerer kontrollerte verdier. Da kan De teste hvordan komponenten gjengis for ulike store-tilstander uten den faktiske store-logikken

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

Teste asynkrone handlinger

Mock fetch i testen, og kall den asynkrone handlingen via getState(). Vent på den asynkrone operasjonen med await, og kontroller deretter den oppdaterte tilstanden

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

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

Beskyttelse av DevTools i produksjon

Deaktiver devtools i produksjon ved å bruke middleware-beskyttelse med en betingelse. Dette hindrer at store-strukturen eksponeres for brukerne

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

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

Loggings-middleware

De kan skrive en egendefinert loggings-middleware som logger hver tilstandsendring til konsollen – nyttig når De ikke kan installere nettleserutvidelser

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

Kunnskapssjekk

Hvordan tilbakestiller De en Zustand-store til starttilstanden mellom tester?

Besvar den i den interaktive leksjonen

Oppsummering

Legg til devtools-middleware, og gi handlingene navn for lesbare tidslinjer i DevTools. Test storer direkte med getState()/setState() uten å gjengi komponenter. Tilbakestill tilstanden i beforeEach for å isolere testene

Kurset er fullført

Gratulerer! De har fullført **Tilstandsforvaltning med Zustand**. Nå kan De opprette storer, bruke selektorer, lagre tilstand, feilsøke med DevTools og skrive enhetstester for store-logikken

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Zustand DevTools og testing av stores» gratis?

Ja – hele teksten i «Zustand DevTools og testing av stores» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Zustand DevTools og testing av stores»?

Koble til Redux DevTools via devtools-middleware og enhetstest store-actions direkte. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Zustand DevTools og testing av stores»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Opprette din første Zustand-store
Selectorer og forebygging av unødvendige nye rendringer
Bevare state med Persist-middleware
Zustand DevTools og testing av stores

← Tilbake til React Academy