PricingLoginStart free
React Academy · Урок

DevTools Zustand и тестирование хранилищ

Подключитесь к Redux DevTools через промежуточное ПО devtools и напрямую тестируйте действия хранилища.

Урок 4 из 413 шагов

«DevTools Zustand и тестирование хранилищ» — бесплатный урок React Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

В этом уроке Вы подключите store Zustand к Redux DevTools для отладки с перемещением во времени и непосредственно напишете модульные тесты для действий store.

Промежуточное ПО DevTools

Оберните store в промежуточное ПО devtools, чтобы подключить его к расширению браузера Redux DevTools. После этого Вы сможете проверять каждое действие и изменение состояния на временной шкале 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' }
  )
);

Именованные действия в DevTools

Передайте имя действия третьим аргументом в set() при использовании devtools. Эта метка появится на временной шкале DevTools и упростит отслеживание изменений.
set(s => ({ count: s.count + 1 }), false, 'counter/increment');
// Appears as 'counter/increment' in Redux DevTools

Объединение persist и devtools

Объединяйте несколько промежуточных ПО в цепочку. Оберните devtools в persist, чтобы видеть все изменения состояния, включая изменения после восстановления данных из хранилища.
const useStore = create(
  devtools(
    persist(
      (set) => ({ /* ... */ }),
      { name: 'my-store' }
    ),
    { name: 'MyStore' }
  )
);

Тестирование store Zustand

Store Zustand — это обычный JavaScript. Вы можете тестировать его напрямую, не отображая компоненты React. Импортируйте store и вызывайте getState() и setState() в своих тестах.
import { useCounterStore } from './store';

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

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

Сброс состояния между тестами

Вызывайте setState с начальными значениями в beforeEach, чтобы сбрасывать store между тестами и предотвращать утечку состояния между тестовыми случаями.
const initialState = { count: 0, user: null };

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

Имитация store в тестах компонентов

В тестах компонентов имитируйте хук store, чтобы он возвращал контролируемые значения. Это позволяет проверять отображение компонента для разных состояний store без использования фактической логики store.
vi.mock('./useCounterStore', () => ({
  useCounterStore: vi.fn(() => ({ count: 5, increment: vi.fn() })),
}));

Тестирование асинхронных действий

Имитируйте fetch в своём тесте и вызывайте асинхронное действие через getState(). Дождитесь асинхронной операции с помощью await, а затем проверьте обновлённое состояние.
global.fetch = vi.fn().mockResolvedValue({
  json: () => Promise.resolve({ id: 1, name: 'Alice' }),
});

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

Защита DevTools в рабочей среде

Отключайте devtools в рабочей среде, применяя промежуточное ПО условно. Это предотвращает раскрытие структуры store пользователям.
const isDev = process.env.NODE_ENV === 'development';

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

Промежуточное ПО для логирования

Вы можете написать пользовательское промежуточное ПО для логирования каждого изменения состояния в консоль — это полезно, когда Вы не можете установить расширения браузера.
const log = (fn) => (set, get, api) => fn(
  (args, replace, name) => {
    console.log('action', name, args);
    set(args, replace, name);
  }, get, api
);

Быстрая проверка

Как сбросить store Zustand в исходное состояние между тестами?
Ответь в интерактивном уроке

Итоги

Добавьте промежуточное ПО devtools и присвойте действиям имена, чтобы временные шкалы DevTools было легко читать. Тестируйте store напрямую с помощью getState()/setState(), не отображая компоненты. Сбрасывайте состояние в beforeEach, чтобы изолировать тесты.

Курс завершён

Поздравляем! Вы завершили курс **Управление состоянием с Zustand**. Теперь Вы умеете создавать store, использовать селекторы, сохранять состояние, выполнять отладку с помощью DevTools и писать модульные тесты для логики store.
Можно начать бесплатно

Изучай React с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
88
Уроки
324
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «DevTools Zustand и тестирование хранилищ» бесплатный?

Да — полный текст урока «DevTools Zustand и тестирование хранилищ» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «DevTools Zustand и тестирование хранилищ»?

Подключитесь к Redux DevTools через промежуточное ПО devtools и напрямую тестируйте действия хранилища. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «DevTools Zustand и тестирование хранилищ»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Создание первого хранилища Zustand
  2. Селекторы и предотвращение лишних повторных рендерингов
  3. Сохранение состояния с промежуточным ПО persist
  4. DevTools Zustand и тестирование хранилищ
← Назад к React Academy