Gerenciamento de Estado com Jest: Testando Redux e Zustand

Por que testar o gerenciamento de estado global?

Um gerenciamento de estado global eficiente é crucial para manter sua aplicação consistente, previsível e fácil de depurar. Testes unitários garantem que as alterações no estado ocorram como esperado, prevenindo regressões.

Como testar Redux com Jest (Reducers, Actions e Store)

Ao testar o Redux, você precisa considerar três principais aspectos: reducers, actions e a store.

Os reducers são responsáveis por modificar o estado da aplicação em resposta às actions. É essencial garantir que eles produzam novos estados sem modificar diretamente o estado atual, respeitando os princípios de imutabilidade.

As actions são objetos simples que descrevem eventos que acontecem na aplicação. Testá-las envolve assegurar que elas retornem corretamente os objetos com os tipos e payloads esperados.

Por fim, a store é o componente que combina reducers e actions, mantendo o estado global e permitindo a interação dos componentes com esse estado. Testes para a store focam na verificação de que o estado seja atualizado corretamente ao despachar actions e que as integrações entre reducers e ações estejam funcionando como esperado.

1. Testando Reducers

Reducers devem sempre retornar um estado novo sem modificar o anterior. Um exemplo básico:

Copiar
// reducer.js
const initialState = { count: 0 };

export default function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'increment':
      return { 
        ...state, // mantenha sempre uma cópia do estado atual
        count: state.count + 1 
      };
    default:
      return state;
  }
}

Teste com Jest:

Copiar
// reducer.test.js
import counterReducer from './reducer';

describe('counterReducer', () => {
  test('deve retornar o estado inicial quando o estado atual não é fornecido', () => {
    const newState = counterReducer(undefined, {});
    expect(newState).toEqual({ count: 0 });
  });

  test('deve incrementar o contador', () => {
    const state = { count: 0 };
    const newState = counterReducer(state, { type: 'increment' });
    expect(newState.count).toBe(1);
  });

  test('não deve modificar o estado original', () => {
    const state = { count: 0 };
    const newState = counterReducer(state, { type: 'increment' });

    expect(newState).not.toBe(state); // garante que é um novo objeto
    expect(state.count).toBe(0);      // garante que o estado original não mudou
  });
});

2. Testando Actions

Actions devem criar corretamente os objetos que descrevem o que ocorreu:

Copiar
// actions.js
export const increment = () => ({ type: 'increment' });

Teste com Jest:

Copiar
// actions.test.js
import { increment } from './actions';

describe('increment action', () => {
  test('deve retornar a action correta', () => {
    expect(increment()).toEqual({ type: 'increment' });
  });
});

3. Testando Store

Teste a integração entre reducers, actions e store:

Copiar
// store.test.js
import { createStore } from 'redux';
import counterReducer from './reducer';

describe('Redux store', () => {
  let store;

  beforeEach(() => {
    store = createStore(counterReducer);
  });

  test('deve retornar o estado inicial correto', () => {
    expect(store.getState()).toEqual({ count: 0 });
  });

  test('deve atualizar o estado corretamente ao disparar uma action', () => {
    store.dispatch({ type: 'increment' });
    expect(store.getState().count).toBe(1);
  });

  test('deve atualizar o estado corretamente após múltiplas ações', () => {
    store.dispatch({ type: 'increment' });
    store.dispatch({ type: 'increment' });
    expect(store.getState().count).toBe(2);
  });
});

Como testar Zustand com Jest (Estado com hooks)

Zustand é uma biblioteca leve e eficiente que oferece uma alternativa simplificada ao Redux para o gerenciamento de estado global em aplicações React. Ela permite criar e gerenciar estados de forma clara e direta, sem a necessidade de boilerplate excessivo. Zustand utiliza hooks para acessar e modificar o estado, o que facilita os testes unitários com Jest.

Um exemplo prático de criação de store com Zustand é definir um estado inicial e funções que alteram esse estado utilizando a função create fornecida pela biblioteca

Copiar
// store.js
import create from 'zustand';

export const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 }))
}));

Teste com Jest:

Copiar
// store.test.js
import { useCounterStore } from './store';

describe('useCounterStore', () => {
  beforeEach(() => {
    // Resetando o estado para garantir testes isolados
    useCounterStore.setState({ count: 0 });
  });

  test('deve retornar o estado inicial correto', () => {
    const state = useCounterStore.getState();
    expect(state.count).toBe(0);
  });

  test('deve incrementar o contador corretamente', () => {
    const { increment } = useCounterStore.getState();
    increment();
    expect(useCounterStore.getState().count).toBe(1);
  });

  test('deve decrementar o contador corretamente', () => {
    const { decrement } = useCounterStore.getState();
    decrement();
    expect(useCounterStore.getState().count).toBe(-1);
  });

  test('deve lidar corretamente com múltiplas ações', () => {
    const { increment, decrement } = useCounterStore.getState();
    increment();
    increment();
    decrement();
    expect(useCounterStore.getState().count).toBe(1);
  });
});

Boas práticas para testes de gerenciamento de estado

Para garantir testes eficazes e robustos, é importante manter cada teste completamente isolado, evitando interferências entre eles. Inicialize sempre o estado global antes de cada teste para assegurar consistência e previsibilidade nos resultados.

É fundamental escrever testes claros e diretos, abordando um comportamento específico por teste. Isso torna mais fácil identificar problemas quando algum teste falhar. Além disso, evite acoplamento nos testes: eles devem focar apenas nas interfaces públicas e não nas implementações internas, facilitando futuras mudanças sem comprometer os testes existentes.

Erros comuns a serem evitados

Durante o desenvolvimento de testes para Redux e Zustand, alguns erros comuns podem comprometer a qualidade e a eficácia dos testes. Um deles é modificar diretamente o estado global sem utilizar métodos apropriados fornecidos pelas bibliotecas, violando os princípios de imutabilidade.

Outro erro frequente é tentar testar múltiplos comportamentos diferentes em um único teste, o que pode tornar o teste confuso e difícil de depurar. Além disso, esquecer de limpar ou resetar o estado global antes de cada teste pode levar a resultados inesperados e inconsistentes.

Realizar testes eficazes no gerenciamento de estado global utilizando Jest garante aplicações React mais seguras, estáveis e de fácil manutenção. Dominar técnicas de testes em Redux e Zustand fortalece significativamente a robustez da aplicação e reduz riscos de bugs em produção. Aplicando as práticas recomendadas e evitando erros comuns mencionados, você estará construindo uma base sólida para seu projeto e garantindo uma experiência consistente para os usuários finais.