0Pricing
React Academy · Lekcja

Zustand DevTools i testowanie store'ów

Łączenie z Redux DevTools za pomocą middleware devtools oraz bezpośrednie testowanie jednostkowe akcji store'a.

Zustand DevTools i testowanie store'ów to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Witamy

W tej lekcji połączysz store Zustand z Redux DevTools na potrzeby debugowania z podróżą w czasie oraz bezpośrednio napiszesz testy jednostkowe akcji store'a.

Middleware devtools

Owiń store w middleware devtools, aby połączyć go z rozszerzeniem przeglądarki Redux DevTools. Następnie możesz sprawdzać każdą akcję i zmianę stanu na osi czasu 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' }
  )
);

Nazwane akcje w DevTools

Przekaż nazwę akcji jako trzeci argument do set(), gdy używasz devtools. Ta etykieta pojawi się na osi czasu DevTools, ułatwiając prześledzenie dokonanej zmiany.
set(s => ({ count: s.count + 1 }), false, 'counter/increment');
// Appears as 'counter/increment' in Redux DevTools

Łączenie persist i devtools

Łącz wiele middleware'ów. Umieść devtools wewnątrz persist, aby obserwować wszystkie zmiany stanu, w tym te wynikające z ponownej hydratacji z magazynu.
const useStore = create(
  devtools(
    persist(
      (set) => ({ /* ... */ }),
      { name: 'my-store' }
    ),
    { name: 'MyStore' }
  )
);

Testowanie store'ów Zustand

Store'y Zustand są zwykłym kodem JavaScript. Możesz testować je bezpośrednio, bez renderowania komponentów React. Zaimportuj store i w testach wywołuj getState() oraz setState().
import { useCounterStore } from './store';

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

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

Resetowanie stanu między testami

Wywołaj setState z wartościami początkowymi w beforeEach, aby zresetować store między testami i zapobiec przenikaniu stanu między przypadkami testowymi.
const initialState = { count: 0, user: null };

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

Mockowanie store'a w testach komponentów

W testach komponentów zamockuj hook store'a tak, aby zwracał kontrolowane wartości. Dzięki temu możesz sprawdzać renderowanie komponentu dla różnych stanów store'a bez używania jego rzeczywistej logiki.
vi.mock('./useCounterStore', () => ({
  useCounterStore: vi.fn(() => ({ count: 5, increment: vi.fn() })),
}));

Testowanie akcji asynchronicznych

Zamockuj fetch w teście i wywołaj akcję asynchroniczną za pomocą getState(). Zaczekaj na zakończenie operacji asynchronicznej, używając await, a następnie sprawdź zaktualizowany stan.
global.fetch = vi.fn().mockResolvedValue({
  json: () => Promise.resolve({ id: 1, name: 'Alice' }),
});

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

Ochrona DevTools w produkcji

Wyłącz devtools w środowisku produkcyjnym, warunkowo stosując middleware. Zapobiega to ujawnieniu struktury store'a użytkownikom.
const isDev = process.env.NODE_ENV === 'development';

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

Middleware rejestrowania

Możesz napisać niestandardowy middleware rejestrujący, który zapisuje każdą zmianę stanu w konsoli — jest to przydatne, gdy nie możesz zainstalować rozszerzeń przeglądarki.
const log = (fn) => (set, get, api) => fn(
  (args, replace, name) => {
    console.log('action', name, args);
    set(args, replace, name);
  }, get, api
);

Szybkie sprawdzenie

Jak zresetować store Zustand do stanu początkowego między testami?

Podsumowanie

Dodaj middleware devtools i nazywaj akcje, aby osie czasu DevTools były czytelne. Testuj store'y bezpośrednio za pomocą getState()/setState(), bez renderowania komponentów. Resetuj stan w beforeEach, aby odizolować testy.

Kurs ukończony

Gratulacje! Ukończyłeś kurs **Zarządzanie stanem za pomocą Zustand**. Potrafisz tworzyć store'y, używać selektorów, zachowywać stan, debugować za pomocą DevTools i pisać testy jednostkowe logiki store'a.

Często zadawane pytania

Czy lekcja „Zustand DevTools i testowanie store'ów” jest bezpłatna?

Tak — pełny tekst „Zustand DevTools i testowanie store'ów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zustand DevTools i testowanie store'ów”?

Łączenie z Redux DevTools za pomocą middleware devtools oraz bezpośrednie testowanie jednostkowe akcji store'a. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Zustand DevTools i testowanie store'ów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Tworzenie pierwszego store Zustand
  2. Selektory i zapobieganie zbędnym ponownym renderowaniom
  3. Utrwalanie stanu za pomocą middleware persist
  4. Zustand DevTools i testowanie store'ów
← Powrót do React Academy