React Academy · Aula

DevTools do Zustand e testes de armazenamentos

Conecte-se ao Redux DevTools por meio do middleware devtools e teste diretamente as ações do armazenamento.

Aula 4 de 413 etapas

DevTools do Zustand e testes de armazenamentos é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você conectará um store do Zustand ao Redux DevTools para depuração com viagem no tempo e escreverá testes unitários diretamente para as ações do store.

A camada intermediária devtools

Envolva seu store com a camada intermediária devtools para conectá-lo à extensão do navegador Redux DevTools. Depois, você poderá inspecionar cada ação e alteração de estado na linha do tempo do 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' }
  )
);

Ações nomeadas no DevTools

Passe um nome de ação como terceiro argumento para set(), ao usar devtools. Esse rótulo aparece na linha do tempo do DevTools, facilitando o rastreamento do que mudou.

set(s => ({ count: s.count + 1 }), false, 'counter/increment');
// Appears as 'counter/increment' in Redux DevTools

Combinando persist e devtools

Encadeie várias camadas intermediárias. Envolva devtools dentro de persist para visualizar todas as alterações de estado, inclusive as causadas pela reidratação do armazenamento.

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

Testando stores do Zustand

Os stores do Zustand são JavaScript simples. Você pode testá-los diretamente sem renderizar componentes React. Importe o store e chame getState() e setState() nos seus testes.

import { useCounterStore } from './store';

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

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

Redefinindo o estado entre testes

Chame setState com os valores iniciais em um beforeEach para redefinir o store entre os testes e evitar o vazamento de estado entre os casos de teste.

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

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

Simulando o store em testes de componentes

Nos testes de componentes, simule o hook do store para retornar valores controlados. Assim, você pode testar como o componente é renderizado para diferentes estados do store sem usar a lógica real do store.

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

Testando ações assíncronas

Simule fetch no seu teste e chame a ação assíncrona por meio de getState(). Aguarde a operação assíncrona com await e depois verifique o estado atualizado.

global.fetch = vi.fn().mockResolvedValue({
  json: () => Promise.resolve({ id: 1, name: 'Alice' }),
});

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

Proteção do DevTools em produção

Desative o devtools em produção aplicando condicionalmente a camada intermediária. Isso impede que a estrutura do seu store seja exposta aos usuários.

const isDev = process.env.NODE_ENV === 'development';

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

Camada intermediária de registro

Você pode escrever uma camada intermediária personalizada de registro para registrar cada alteração de estado no console, o que é útil quando não é possível instalar extensões do navegador.

const log = (fn) => (set, get, api) => fn(
  (args, replace, name) => {
    console.log('action', name, args);
    set(args, replace, name);
  }, get, api
);

Verificação rápida

Como você redefine um store do Zustand para seu estado inicial entre os testes?

Responda na aula interativa

Recapitulação

Adicione a camada intermediária devtools e dê nomes às suas ações para criar linhas do tempo do DevTools fáceis de ler. Teste os stores diretamente com getState()/setState(), sem renderizar componentes. Redefina o estado em beforeEach para isolar os testes.

Curso concluído

Parabéns! Você concluiu **Gerenciamento de estado com Zustand**. Agora você pode criar stores, usar seletores, persistir o estado, depurar com DevTools e escrever testes unitários para a lógica do seu store.

Grátis para começar

Aprenda React com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 88
Aulas: 324

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “DevTools do Zustand e testes de armazenamentos” é grátis?

Sim — o texto completo de “DevTools do Zustand e testes de armazenamentos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “DevTools do Zustand e testes de armazenamentos”?

Conecte-se ao Redux DevTools por meio do middleware devtools e teste diretamente as ações do armazenamento. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “DevTools do Zustand e testes de armazenamentos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Criando seu primeiro armazenamento Zustand
Seletores e prevenção de novas renderizações desnecessárias
Persistindo o estado com o middleware persist
DevTools do Zustand e testes de armazenamentos

← Voltar para React Academy