Mockar localStorage em testes unitários com React e TypeScript

Muita gente ainda sofre pra fazer mock de localStorage em testes com React e TypeScript. O problema é que o Jest não reconhece o localStorage por padrão, gerando aquele erro clássico: "ReferenceError: localStorage is not defined".

---

A solução que funciona bem na prática é criar um mock simples, tipo:

export const localStorageMock = {
  getItem: jest.fn().mockImplementation(() => null),
  setItem: jest.fn(),
  removeItem: jest.fn(),
  clear: jest.fn(),
}. Object.defineProperty(window, 'localStorage', {
  value: localStorageMock,
}). 

Assim, você consegue controlar o localStorage nas suas specs, sem quebrar a execução. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco.

---

No meu time, a maior dor é quando o teste tenta acessar localStorage fora do ambiente DOM, aí dá ruim. Com esse mock, fica tranquilo, e ainda dá pra fazer asserts de chamadas. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar.

Claro que, pra quem quer mais controle, dá pra criar mocks mais complexos ou usar bibliotecas específicas, mas pra maioria dos casos, esse truque resolve fácil. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois. Sem esse critério, a solução pode parecer simples no começo e cara no suporte.

E aí, alguém aí já passou por isso e tem uma solução melhor? Como vocês costumam fazer quando precisam mockar o localStorage em testes com React? A decisão fica mais saudável quando o time consegue medir o impacto depois. Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar.