Zustand 5 store with persist middleware, tested with Vitest: working versions (tested 2026-10-15)

{
  "name": "zustand-store-vitest",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "vitest run --reporter=default --reporter=json --outputFile=test-report.json"
  },
  "dependencies": {
    "zustand": "5.0.15"
  },
  "devDependencies": {
    "@types/node": "24.19.2",
    "vitest": "5.0.4"
  }
}

import { createStore } from "zustand/vanilla";
import { persist, createJSONStorage, type StateStorage } from "zustand/middleware";

export type Item = { sku: string; price: number; qty: number };
type CartState = {
  items: Item[];
  add: (sku: string, price: number) => void;
  remove: (sku: string) => void;
  clear: () => void;
};

export const total = (s: Pick<CartState, "items">) => s.items.reduce((n, i) => n + i.price * i.qty, 0);

// Use createStore for logic/tests; in React wrap it with useStore(store, selector).
export function createCartStore(storage: StateStorage) {
  return createStore<CartState>()(persist((set) => ({
    items: [],
    add: (sku, price) => set((s) => {
      const hit = s.items.find((i) => i.sku === sku);
      return { items: hit ? s.items.map((i) => (i.sku === sku ? { ...i, qty: i.qty + 1 } : i)) : [...s.items, { sku, price, qty: 1 }] };
    }),
    remove: (sku) => set((s) => ({ items: s.items.filter((i) => i.sku !== sku) })),
    clear: () => set({ items: [] }),
  }), { name: "cart", storage: createJSONStorage(() => storage), partialize: (s) => ({ items: s.items }) }));
}

import { describe, it, expect, beforeEach } from "vitest";
import type { StateStorage } from "zustand/middleware";
import { createCartStore, total } from "../src/cart";

let mem: Record<string, string>;
const storage: StateStorage = { getItem: (k) => mem[k] ?? null, setItem: (k, v) => { mem[k] = v; }, removeItem: (k) => { delete mem[k]; } };
beforeEach(() => { mem = {}; });

describe("cart store", () => {
  it("adds, merges quantities and totals", () => {
    const s = createCartStore(storage);
    s.getState().add("mug", 10); s.getState().add("mug", 10); s.getState().add("tee", 25);
    expect(s.getState().items).toEqual([{ sku: "mug", price: 10, qty: 2 }, { sku: "tee", price: 25, qty: 1 }]);
    expect(total(s.getState())).toBe(45);
  });

  it("persists only data, not actions", () => {
    const s = createCartStore(storage);
    s.getState().add("mug", 10);
    expect(JSON.parse(mem.cart)).toEqual({ state: { items: [{ sku: "mug", price: 10, qty: 1 }] }, version: 0 });
  });

  it("rehydrates from storage", () => {
    createCartStore(storage).getState().add("tee", 25);
    expect(createCartStore(storage).getState().items).toHaveLength(1);
  });

  it("notifies subscribers", () => {
    const s = createCartStore(storage);
    const seen: number[] = [];
    s.subscribe((st) => seen.push(st.items.length));
    s.getState().add("a", 1); s.getState().clear();
    expect(seen).toEqual([1, 0]);
  });
});