Testando Stores do Zustand

Q: Como você reseta um store do Zustand entre testes?

Chame setState com o estado inicial antes de cada teste. Use setState(initialState, true) com replace: true para um reset completo.

Q: Como você testa ações do store sem renderizar um componente?

Use getState() para chamar ações e ler o estado diretamente.

Q: Como você pré-define o estado do store antes de um teste de componente?

Chame setState antes de render() para popular o store com dados de teste. O componente lerá do estado pré-definido quando for montado.

Q: Como você mocka um store inteiro do Zustand com Vitest?

Use vi.mock no nível do módulo. O mock se aplica a todos os testes no arquivo.

Q: Armadilha: O que acontece se você usar setState({}, true) com replace: true e um objeto vazio?

Ele remove todas as propriedades, incluindo ações. Sempre passe o estado inicial completo (incluindo referências de ações) ao usar replace: true. Ou apenas resete as propriedades de dados sem replace para manter as ações intactas.

Q: Como você testa ações assíncronas?

Faça um mock do fetch, então use await na ação assíncrona diretamente.

Q: Como você tipa o estado de um mock de store em TypeScript?

Use ReturnType para um mock type-safe.

Receita

Teste stores do Zustand resetando o estado entre testes, usando getState() e setState() para asserções diretas e mockando stores em testes de componentes.

// stores/counter-store.ts
import { create } from "zustand";
 
interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}
 
export const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
  reset: () => set({ count: 0 }),
}));

// __tests__/counter-store.test.ts
import { useCounterStore } from "@/stores/counter-store";
 
// Reset store before each test
beforeEach(() => {
  useCounterStore.setState({ count: 0 });
});
 
describe("CounterStore", () => {
  it("starts at zero", () => {
    expect(useCounterStore.getState().count).toBe(0);
  });
 
  it("increments", () => {
    useCounterStore.getState().increment();
    expect(useCounterStore.getState().count).toBe(1);
  });
 
  it("decrements", () => {
    useCounterStore.setState({ count: 5 });
    useCounterStore.getState().decrement();
    expect(useCounterStore.getState().count).toBe(4);
  });
 
  it("resets to zero", () => {
    useCounterStore.setState({ count: 42 });
    useCounterStore.getState().reset();
    expect(useCounterStore.getState().count).toBe(0);
  });
});

Exemplo Funcional

// stores/todo-store.ts
import { create } from "zustand";
 
interface Todo {
  id: string;
  text: string;
  done: boolean;
}
 
interface TodoStore {
  todos: Todo[];
  addTodo: (text: string) => void;
  toggleTodo: (id: string) => void;
  removeTodo: (id: string) => void;
  getActiveTodos: () => Todo[];
  getCompletedCount: () => number;
}
 
export const useTodoStore = create<TodoStore>((set, get) => ({
  todos: [],
 
  addTodo: (text) =>
    set((s) => ({
      todos: [...s.todos, { id: crypto.randomUUID(), text, done: false }],
    })),
 
  toggleTodo: (id) =>
    set((s) => ({
      todos: s.todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
    })),
 
  removeTodo: (id) =>
    set((s) => ({ todos: s.todos.filter((t) => t.id !== id) })),
 
  getActiveTodos: () => get().todos.filter((t) => !t.done),
  getCompletedCount: () => get().todos.filter((t) => t.done).length,
}));

// __tests__/todo-store.test.ts
import { useTodoStore } from "@/stores/todo-store";
import { act } from "@testing-library/react";
 
const initialState = useTodoStore.getState();
 
beforeEach(() => {
  useTodoStore.setState(initialState, true); // true = replace
});
 
describe("TodoStore", () => {
  it("adds a todo", () => {
    act(() => {
      useTodoStore.getState().addTodo("Buy milk");
    });
 
    const { todos } = useTodoStore.getState();
    expect(todos).toHaveLength(1);
    expect(todos[0].text).toBe("Buy milk");
    expect(todos[0].done).toBe(false);
  });
 
  it("toggles a todo", () => {
    // Seed state
    useTodoStore.setState({
      todos: [{ id: "1", text: "Test", done: false }],
    });
 
    act(() => {
      useTodoStore.getState().toggleTodo("1");
    });
 
    expect(useTodoStore.getState().todos[0].done).toBe(true);
  });
 
  it("removes a todo", () => {
    useTodoStore.setState({
      todos: [
        { id: "1", text: "A", done: false },
        { id: "2", text: "B", done: true },
      ],
    });
 
    act(() => {
      useTodoStore.getState().removeTodo("1");
    });
 
    expect(useTodoStore.getState().todos).toHaveLength(1);
    expect(useTodoStore.getState().todos[0].id).toBe("2");
  });
 
  it("computes active todos", () => {
    useTodoStore.setState({
      todos: [
        { id: "1", text: "A", done: false },
        { id: "2", text: "B", done: true },
        { id: "3", text: "C", done: false },
      ],
    });
 
    expect(useTodoStore.getState().getActiveTodos()).toHaveLength(2);
    expect(useTodoStore.getState().getCompletedCount()).toBe(1);
  });
});

// __tests__/todo-component.test.tsx
import { render, screen, fireEvent } from "@testing-library/react";
import { useTodoStore } from "@/stores/todo-store";
import { TodoList } from "@/components/todo-list";
 
// Reset before each test
beforeEach(() => {
  useTodoStore.setState({ todos: [] }, true);
});
 
describe("TodoList component", () => {
  it("renders todos from the store", () => {
    useTodoStore.setState({
      todos: [
        { id: "1", text: "Write tests", done: false },
        { id: "2", text: "Ship feature", done: true },
      ],
    });
 
    render(<TodoList />);
 
    expect(screen.getByText("Write tests")).toBeInTheDocument();
    expect(screen.getByText("Ship feature")).toBeInTheDocument();
  });
 
  it("adds a todo via the form", async () => {
    render(<TodoList />);
 
    const input = screen.getByRole("textbox");
    const button = screen.getByRole("button", { name: /add/i });
 
    fireEvent.change(input, { target: { value: "New todo" } });
    fireEvent.click(button);
 
    expect(useTodoStore.getState().todos).toHaveLength(1);
    expect(useTodoStore.getState().todos[0].text).toBe("New todo");
  });
});

Mergulho Profundo

Como Funciona

Stores do Zustand expõem getState() e setState() no próprio hook, permitindo inspeção e manipulação direta do estado sem renderizar componentes.
setState(state, replace) com replace: true substitui o estado inteiro em vez de mesclar. Isso é essencial para resets limpos de testes.
Ações do store são funções simples acessíveis via getState(). Chame-as diretamente nos testes.
Em testes de componentes, o store real é usado por padrão. Pré-defina o estado com setState antes de renderizar.
Como stores são singletons, o estado persiste entre testes a menos que seja explicitamente resetado.

Variações

Utilitário de reset global:

// test-utils/reset-stores.ts
import { useCounterStore } from "@/stores/counter-store";
import { useTodoStore } from "@/stores/todo-store";
 
const stores = [
  { store: useCounterStore, initial: { count: 0 } },
  { store: useTodoStore, initial: { todos: [] } },
];
 
export function resetAllStores() {
  stores.forEach(({ store, initial }) => {
    (store as any).setState(initial, true);
  });
}
 
// In setupTests.ts
beforeEach(() => resetAllStores());

Mockando um store inteiramente:

// __tests__/header.test.tsx
import { vi } from "vitest";
 
vi.mock("@/stores/auth-store", () => ({
  useAuthStore: vi.fn((selector) =>
    selector({
      user: { name: "Test User", role: "admin" },
      token: "fake-token",
      isAuthenticated: () => true,
      logout: vi.fn(),
    })
  ),
}));
 
import { render, screen } from "@testing-library/react";
import { Header } from "@/components/header";
 
it("shows admin panel link for admin users", () => {
  render(<Header />);
  expect(screen.getByText("Admin Panel")).toBeInTheDocument();
});

Testando ações assíncronas:

import { useTodoStore } from "@/stores/todo-store";
 
// Mock fetch
global.fetch = vi.fn(() =>
  Promise.resolve({
    ok: true,
    json: () => Promise.resolve([{ id: "1", text: "From API", done: false }]),
  } as Response)
);
 
it("fetches todos from API", async () => {
  await useTodoStore.getState().fetchTodos();
 
  expect(fetch).toHaveBeenCalledWith("/api/todos");
  expect(useTodoStore.getState().todos).toHaveLength(1);
  expect(useTodoStore.getState().todos[0].text).toBe("From API");
});

Testando subscriptions:

it("calls subscriber on state change", () => {
  const listener = vi.fn();
  const unsub = useCounterStore.subscribe(listener);
 
  useCounterStore.getState().increment();
 
  expect(listener).toHaveBeenCalledTimes(1);
  expect(listener).toHaveBeenCalledWith(
    expect.objectContaining({ count: 1 }),
    expect.objectContaining({ count: 0 })
  );
 
  unsub();
});

Notas de TypeScript

getState() retorna o estado completo tipado, incluindo ações.
setState aceita Partial<State> ou (s: State) => Partial<State>.
Mock de seletores de store fornecendo uma função que corresponde à assinatura do seletor.

// Type-safe mock
const mockState: ReturnType<typeof useAuthStore.getState> = {
  user: { name: "Test", email: "test@test.com", role: "admin" },
  token: "fake",
  login: vi.fn(),
  logout: vi.fn(),
  isAuthenticated: () => true,
};

Armadilhas

Stores do Zustand são singletons no processo de teste. Se você não resetar o estado entre os testes, o estado de um teste vaza para o próximo.
setState({}, true) com replace: true remove todas as propriedades, incluindo ações. Passe o estado inicial completo, incluindo referências de ações, ou apenas resete as propriedades de dados.
Mockar stores com vi.mock é a nível de módulo e se aplica a todos os testes no arquivo. Use vi.fn().mockReturnValue() por teste para diferentes estados de mock.
act() de @testing-library/react pode ser necessário quando mudanças no store disparam atualizações de estado do React em componentes renderizados.
Ações assíncronas exigem await nos testes. Use await store.getState().asyncAction() ou waitFor da testing-library.
Se você usar o middleware persist, os testes podem tentar acessar o localStorage. Faça um mock dele ou use um adaptador de armazenamento em memória nos testes.

Alternativas

Abordagem	Prós	Contras
`getState`/`setState` direto	Não precisa de renderização, testes unitários rápidos	Não testa a integração com componentes
Testes de componentes com store real	Testa a integração completa	Mais lento, mais configuração
Store mockado (`vi.mock`)	Isola o componente da lógica do store	Mock pode divergir do store real
`createStore` por teste	Isolamento completo, sem necessidade de reset	Mais boilerplate

FAQs

Como você reseta um store do Zustand entre testes?

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

Chame setState com o estado inicial antes de cada teste.
Use setState(initialState, true) com replace: true para um reset completo.

Por que você deve resetar stores entre testes?

Stores do Zustand são singletons no processo de teste.
Sem resetar, o estado de um teste vaza para o próximo, causando testes instáveis.

Como você testa ações do store sem renderizar um componente?

it("increments", () => {
  useCounterStore.getState().increment();
  expect(useCounterStore.getState().count).toBe(1);
});

Use getState() para chamar ações e ler o estado diretamente.

Como você pré-define o estado do store antes de um teste de componente?

Chame setState antes de render() para popular o store com dados de teste.
O componente lerá do estado pré-definido quando for montado.

Como você mocka um store inteiro do Zustand com Vitest?

vi.mock("@/stores/auth-store", () => ({
  useAuthStore: vi.fn((selector) =>
    selector({
      user: { name: "Test User" },
      logout: vi.fn(),
    })
  ),
}));

Use vi.mock no nível do módulo. O mock se aplica a todos os testes no arquivo.

Armadilha: O que acontece se você usar `setState({}, true)` com `replace: true` e um objeto vazio?

Ele remove todas as propriedades, incluindo ações.
Sempre passe o estado inicial completo (incluindo referências de ações) ao usar replace: true.
Ou apenas resete as propriedades de dados sem replace para manter as ações intactas.

Armadilha: Você precisa de `act()` ao testar mudanças no store em componentes renderizados?

Sim. Mudanças no store disparam atualizações de estado do React, então envolva-as em act() de @testing-library/react.
Para testes diretos do store (sem renderização), act() nem sempre é necessário.

Como você testa ações assíncronas?

it("fetches todos", async () => {
  global.fetch = vi.fn(() =>
    Promise.resolve({
      ok: true,
      json: () => Promise.resolve([{ id: "1", text: "Test" }]),
    } as Response)
  );
 
  await useTodoStore.getState().fetchTodos();
  expect(useTodoStore.getState().todos).toHaveLength(1);
});

Faça um mock do fetch, então use await na ação assíncrona diretamente.

Como você testa subscriptions do store?

it("calls subscriber on change", () => {
  const listener = vi.fn();
  const unsub = useCounterStore.subscribe(listener);
  useCounterStore.getState().increment();
  expect(listener).toHaveBeenCalledTimes(1);
  unsub();
});

Como você tipa o estado de um mock de store em TypeScript?

const mockState: ReturnType<typeof useAuthStore.getState> = {
  user: { name: "Test", email: "t@t.com", role: "admin" },
  token: "fake",
  login: vi.fn(),
  logout: vi.fn(),
  isAuthenticated: () => true,
};

Use ReturnType<typeof store.getState> para um mock type-safe.

E se o store usar o middleware persist e os testes tentarem acessar o localStorage?

Testes podem falhar ou produzir resultados inesperados se o localStorage for acessado.
Faça um mock do localStorage ou use um adaptador de armazenamento em memória na configuração do seu teste.

Links Relacionados

Receita

Teste stores do Zustand resetando o estado entre testes, usando getState() e setState() para asserções diretas e mockando stores em testes de componentes.

// stores/counter-store.ts
import { create } from "zustand";
 
interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}
 
export const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
  reset: () => set({ count: 0 }),
}));

// __tests__/counter-store.test.ts
import { useCounterStore } from "@/stores/counter-store";
 
// Reset store before each test
beforeEach(() => {
  useCounterStore.setState({ count: 0 });
});
 
describe("CounterStore", () => {
  it("starts at zero", () => {
    expect(useCounterStore.getState().count).toBe(0);
  });
 
  it("increments", () => {
    useCounterStore.getState().increment();
    expect(useCounterStore.getState().count).toBe(1);
  });
 
  it("decrements", () => {
    useCounterStore.setState({ count: 5 });
    useCounterStore.getState().decrement();
    expect(useCounterStore.getState().count).toBe(4);
  });
 
  it("resets to zero", () => {
    useCounterStore.setState({ count: 42 });
    useCounterStore.getState().reset();
    expect(useCounterStore.getState().count).toBe(0);
  });
});

Exemplo Funcional

// stores/todo-store.ts
import { create } from "zustand";
 
interface Todo {
  id: string;
  text: string;
  done: boolean;
}
 
interface TodoStore {
  todos: Todo[];
  addTodo: (text: string) => void;
  toggleTodo: (id: string) => void;
  removeTodo: (id: string) => void;
  getActiveTodos: () => Todo[];
  getCompletedCount: () => number;
}
 
export const useTodoStore = create<TodoStore>((set, get) => ({
  todos: [],
 
  addTodo: (text) =>
    set((s) => ({
      todos: [...s.todos, { id: crypto.randomUUID(), text, done: false }],
    })),
 
  toggleTodo: (id) =>
    set((s) => ({
      todos: s.todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
    })),
 
  removeTodo: (id) =>
    set((s) => ({ todos: s.todos.filter((t) => t.id !== id) })),
 
  getActiveTodos: () => get().todos.filter((t) => !t.done),
  getCompletedCount: () => get().todos.filter((t) => t.done).length,
}));

// __tests__/todo-store.test.ts
import { useTodoStore } from "@/stores/todo-store";
import { act } from "@testing-library/react";
 
const initialState = useTodoStore.getState();
 
beforeEach(() => {
  useTodoStore.setState(initialState, true); // true = replace
});
 
describe("TodoStore", () => {
  it("adds a todo", () => {
    act(() => {
      useTodoStore.getState().addTodo("Buy milk");
    });
 
    const { todos } = useTodoStore.getState();
    expect(todos).toHaveLength(1);
    expect(todos[0].text).toBe("Buy milk");
    expect(todos[0].done).toBe(false);
  });
 
  it("toggles a todo", () => {
    // Seed state
    useTodoStore.setState({
      todos: [{ id: "1", text: "Test", done: false }],
    });
 
    act(() => {
      useTodoStore.getState().toggleTodo("1");
    });
 
    expect(useTodoStore.getState().todos[0].done).toBe(true);
  });
 
  it("removes a todo", () => {
    useTodoStore.setState({
      todos: [
        { id: "1", text: "A", done: false },
        { id: "2", text: "B", done: true },
      ],
    });
 
    act(() => {
      useTodoStore.getState().removeTodo("1");
    });
 
    expect(useTodoStore.getState().todos).toHaveLength(1);
    expect(useTodoStore.getState().todos[0].id).toBe("2");
  });
 
  it("computes active todos", () => {
    useTodoStore.setState({
      todos: [
        { id: "1", text: "A", done: false },
        { id: "2", text: "B", done: true },
        { id: "3", text: "C", done: false },
      ],
    });
 
    expect(useTodoStore.getState().getActiveTodos()).toHaveLength(2);
    expect(useTodoStore.getState().getCompletedCount()).toBe(1);
  });
});

// __tests__/todo-component.test.tsx
import { render, screen, fireEvent } from "@testing-library/react";
import { useTodoStore } from "@/stores/todo-store";
import { TodoList } from "@/components/todo-list";
 
// Reset before each test
beforeEach(() => {
  useTodoStore.setState({ todos: [] }, true);
});
 
describe("TodoList component", () => {
  it("renders todos from the store", () => {
    useTodoStore.setState({
      todos: [
        { id: "1", text: "Write tests", done: false },
        { id: "2", text: "Ship feature", done: true },
      ],
    });
 
    render(<TodoList />);
 
    expect(screen.getByText("Write tests")).toBeInTheDocument();
    expect(screen.getByText("Ship feature")).toBeInTheDocument();
  });
 
  it("adds a todo via the form", async () => {
    render(<TodoList />);
 
    const input = screen.getByRole("textbox");
    const button = screen.getByRole("button", { name: /add/i });
 
    fireEvent.change(input, { target: { value: "New todo" } });
    fireEvent.click(button);
 
    expect(useTodoStore.getState().todos).toHaveLength(1);
    expect(useTodoStore.getState().todos[0].text).toBe("New todo");
  });
});

Mergulho Profundo

Como Funciona

Stores do Zustand expõem getState() e setState() no próprio hook, permitindo inspeção e manipulação direta do estado sem renderizar componentes.
setState(state, replace) com replace: true substitui o estado inteiro em vez de mesclar. Isso é essencial para resets limpos de testes.
Ações do store são funções simples acessíveis via getState(). Chame-as diretamente nos testes.
Em testes de componentes, o store real é usado por padrão. Pré-defina o estado com setState antes de renderizar.
Como stores são singletons, o estado persiste entre testes a menos que seja explicitamente resetado.

Variações

Utilitário de reset global:

// test-utils/reset-stores.ts
import { useCounterStore } from "@/stores/counter-store";
import { useTodoStore } from "@/stores/todo-store";
 
const stores = [
  { store: useCounterStore, initial: { count: 0 } },
  { store: useTodoStore, initial: { todos: [] } },
];
 
export function resetAllStores() {
  stores.forEach(({ store, initial }) => {
    (store as any).setState(initial, true);
  });
}
 
// In setupTests.ts
beforeEach(() => resetAllStores());

Mockando um store inteiramente:

// __tests__/header.test.tsx
import { vi } from "vitest";
 
vi.mock("@/stores/auth-store", () => ({
  useAuthStore: vi.fn((selector) =>
    selector({
      user: { name: "Test User", role: "admin" },
      token: "fake-token",
      isAuthenticated: () => true,
      logout: vi.fn(),
    })
  ),
}));
 
import { render, screen } from "@testing-library/react";
import { Header } from "@/components/header";
 
it("shows admin panel link for admin users", () => {
  render(<Header />);
  expect(screen.getByText("Admin Panel")).toBeInTheDocument();
});

Testando ações assíncronas:

import { useTodoStore } from "@/stores/todo-store";
 
// Mock fetch
global.fetch = vi.fn(() =>
  Promise.resolve({
    ok: true,
    json: () => Promise.resolve([{ id: "1", text: "From API", done: false }]),
  } as Response)
);
 
it("fetches todos from API", async () => {
  await useTodoStore.getState().fetchTodos();
 
  expect(fetch).toHaveBeenCalledWith("/api/todos");
  expect(useTodoStore.getState().todos).toHaveLength(1);
  expect(useTodoStore.getState().todos[0].text).toBe("From API");
});

Testando subscriptions:

it("calls subscriber on state change", () => {
  const listener = vi.fn();
  const unsub = useCounterStore.subscribe(listener);
 
  useCounterStore.getState().increment();
 
  expect(listener).toHaveBeenCalledTimes(1);
  expect(listener).toHaveBeenCalledWith(
    expect.objectContaining({ count: 1 }),
    expect.objectContaining({ count: 0 })
  );
 
  unsub();
});

Notas de TypeScript

getState() retorna o estado completo tipado, incluindo ações.
setState aceita Partial<State> ou (s: State) => Partial<State>.
Mock de seletores de store fornecendo uma função que corresponde à assinatura do seletor.

// Type-safe mock
const mockState: ReturnType<typeof useAuthStore.getState> = {
  user: { name: "Test", email: "test@test.com", role: "admin" },
  token: "fake",
  login: vi.fn(),
  logout: vi.fn(),
  isAuthenticated: () => true,
};

Armadilhas

Stores do Zustand são singletons no processo de teste. Se você não resetar o estado entre os testes, o estado de um teste vaza para o próximo.
setState({}, true) com replace: true remove todas as propriedades, incluindo ações. Passe o estado inicial completo, incluindo referências de ações, ou apenas resete as propriedades de dados.
Mockar stores com vi.mock é a nível de módulo e se aplica a todos os testes no arquivo. Use vi.fn().mockReturnValue() por teste para diferentes estados de mock.
act() de @testing-library/react pode ser necessário quando mudanças no store disparam atualizações de estado do React em componentes renderizados.
Ações assíncronas exigem await nos testes. Use await store.getState().asyncAction() ou waitFor da testing-library.
Se você usar o middleware persist, os testes podem tentar acessar o localStorage. Faça um mock dele ou use um adaptador de armazenamento em memória nos testes.

Alternativas

Abordagem	Prós	Contras
`getState`/`setState` direto	Não precisa de renderização, testes unitários rápidos	Não testa a integração com componentes
Testes de componentes com store real	Testa a integração completa	Mais lento, mais configuração
Store mockado (`vi.mock`)	Isola o componente da lógica do store	Mock pode divergir do store real
`createStore` por teste	Isolamento completo, sem necessidade de reset	Mais boilerplate

FAQs

Como você reseta um store do Zustand entre testes?

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

Chame setState com o estado inicial antes de cada teste.
Use setState(initialState, true) com replace: true para um reset completo.

Por que você deve resetar stores entre testes?

Stores do Zustand são singletons no processo de teste.
Sem resetar, o estado de um teste vaza para o próximo, causando testes instáveis.

Como você testa ações do store sem renderizar um componente?

it("increments", () => {
  useCounterStore.getState().increment();
  expect(useCounterStore.getState().count).toBe(1);
});

Use getState() para chamar ações e ler o estado diretamente.

Como você pré-define o estado do store antes de um teste de componente?

Chame setState antes de render() para popular o store com dados de teste.
O componente lerá do estado pré-definido quando for montado.

Como você mocka um store inteiro do Zustand com Vitest?

vi.mock("@/stores/auth-store", () => ({
  useAuthStore: vi.fn((selector) =>
    selector({
      user: { name: "Test User" },
      logout: vi.fn(),
    })
  ),
}));

Use vi.mock no nível do módulo. O mock se aplica a todos os testes no arquivo.

Armadilha: O que acontece se você usar `setState({}, true)` com `replace: true` e um objeto vazio?

Ele remove todas as propriedades, incluindo ações.
Sempre passe o estado inicial completo (incluindo referências de ações) ao usar replace: true.
Ou apenas resete as propriedades de dados sem replace para manter as ações intactas.

Armadilha: Você precisa de `act()` ao testar mudanças no store em componentes renderizados?

Sim. Mudanças no store disparam atualizações de estado do React, então envolva-as em act() de @testing-library/react.
Para testes diretos do store (sem renderização), act() nem sempre é necessário.

Como você testa ações assíncronas?

it("fetches todos", async () => {
  global.fetch = vi.fn(() =>
    Promise.resolve({
      ok: true,
      json: () => Promise.resolve([{ id: "1", text: "Test" }]),
    } as Response)
  );
 
  await useTodoStore.getState().fetchTodos();
  expect(useTodoStore.getState().todos).toHaveLength(1);
});

Faça um mock do fetch, então use await na ação assíncrona diretamente.

Como você testa subscriptions do store?

it("calls subscriber on change", () => {
  const listener = vi.fn();
  const unsub = useCounterStore.subscribe(listener);
  useCounterStore.getState().increment();
  expect(listener).toHaveBeenCalledTimes(1);
  unsub();
});

Como você tipa o estado de um mock de store em TypeScript?

const mockState: ReturnType<typeof useAuthStore.getState> = {
  user: { name: "Test", email: "t@t.com", role: "admin" },
  token: "fake",
  login: vi.fn(),
  logout: vi.fn(),
  isAuthenticated: () => true,
};

Use ReturnType<typeof store.getState> para um mock type-safe.

E se o store usar o middleware persist e os testes tentarem acessar o localStorage?

Testes podem falhar ou produzir resultados inesperados se o localStorage for acessado.
Faça um mock do localStorage ou use um adaptador de armazenamento em memória na configuração do seu teste.

Testando Stores do Zustand

Buscar na documentação

Testando Stores do Zustand