Zustand DevTools และการทดสอบ Store

ยินดีต้อนรับ

มิดเดิลแวร์ 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(s => ({ count: s.count + 1 }), false, 'counter/increment');
// Appears as 'counter/increment' in Redux DevTools

การรวม persist และ DevTools

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

การทดสอบสโตร์ของ Zustand

import { useCounterStore } from './store';

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

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

การรีเซ็ตสถานะระหว่างการทดสอบ

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

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

การจำลองสโตร์ในการทดสอบคอมโพเนนต์

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

การทดสอบแอ็กชันแบบอะซิงโครนัส

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 ในโปรดักชัน

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

ตรวจสอบความเข้าใจ

สรุปทบทวน

จบหลักสูตร