React Academy · Oppitunti

Zustand DevTools ja storejen testaaminen

Yhdistäkää Redux DevToolsiin devtools-middlewarellä ja testatkaa storen toiminnot suoraan yksikkötesteillä.

Oppitunti 4/413 vaihetta

Zustand DevTools ja storejen testaaminen on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Tällä oppitunnilla yhdistät Zustand-storen Redux DevToolsiin aikamatkavirheenkorjausta varten ja kirjoitat yksikkötestejä suoraan storen toiminnoille.

devtools-middleware

Ympäröi store devtools-middlewarella ja yhdistä se Redux DevTools -selainlaajennukseen. Sen jälkeen voit tarkastella jokaista toimintoa ja tilan muutosta DevToolsin aikajanalla.

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' }
  )
);

Nimetyt toiminnot DevToolsissa

Välitä toiminnon nimi set()-funktion kolmantena argumenttina, kun käytät devtools-middlewarea. Nimi näkyy DevToolsin aikajanalla, joten muutosten jäljittäminen on helppoa.

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

persist- ja devtools-middlewarejen yhdistäminen

Ketjuta useita middlewareja. Ympäröi persist devtools-middlewarella, jotta näet kaikki tilan muutokset, myös tallennustilasta tapahtuvan hydrauksen aiheuttamat muutokset.

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

Zustand-storejen testaaminen

Zustand-storet ovat tavallista JavaScriptiä. Voit testata niitä suoraan ilman React-komponenttien hahmontamista. Tuo store ja kutsu testeissä getState()- ja setState()-funktioita.

import { useCounterStore } from './store';

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

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

Tilan palauttaminen testien välillä

Kutsu setState-funktiota alkutilan arvoilla beforeEach-lohkossa palauttaaksesi storen tilan testien välillä. Näin tila ei vuoda testitapausten välillä.

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

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

Storen mockaaminen komponenttitesteissä

Komponenttitesteissä mockaa storen hook palauttamaan hallittuja arvoja. Näin voit testata komponentin hahmontumista eri tiloissa ilman varsinaista storen logiikkaa.

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

Asynkronisten toimintojen testaaminen

Mockaa fetch testissäsi ja kutsu asynkronista toimintoa getState()-funktion kautta. Odota asynkronisen operaation valmistumista await-syntaksilla ja tarkista sen jälkeen päivitetty tila.

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

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

Tuotannon DevTools-suojaus

Poista devtools-middleware käytöstä tuotannossa ottamalla se käyttöön ehdollisesti. Näin estät storen rakenteen paljastumisen käyttäjille.

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

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

Lokitus-middleware

Voit kirjoittaa mukautetun lokitus-middlewarein, joka kirjaa jokaisen tilan muutoksen konsoliin — tämä on hyödyllistä, jos selainlaajennuksia ei voi asentaa.

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

Pikatarkistus

Miten palautat Zustand-storen alkutilaan testien välillä?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Lisää devtools-middleware ja nimeä toiminnot, jotta DevToolsin aikajanat ovat selkeitä. Testaa storeja suoraan getState()- ja setState()-funktioilla ilman komponenttien hahmontamista. Palauta tila beforeEach-lohkossa, jotta testit pysyvät erillään.

Kurssi suoritettu

Onnittelut! Suoritit kurssin **Tilanhallinta Zustandilla**. Osaat luoda storeja, käyttää selektoreita, säilyttää tilan, korjata ongelmia DevToolsin avulla ja kirjoittaa yksikkötestejä storen logiikalle.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Zustand DevTools ja storejen testaaminen” ilmainen?

Kyllä – oppitunnin ”Zustand DevTools ja storejen testaaminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Zustand DevTools ja storejen testaaminen”?

Yhdistäkää Redux DevToolsiin devtools-middlewarellä ja testatkaa storen toiminnot suoraan yksikkötesteillä. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Zustand DevTools ja storejen testaaminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Ensimmäisen Zustand-storen luominen
Valitsijat ja tarpeettomien uudelleenrenderöintien estäminen
Tilan säilyttäminen Persist-middlewarellä
Zustand DevTools ja storejen testaaminen

← Takaisin: React Academy