Testando Contextos com Jest em Aplicações React

Importante: sobre projetos criados com Create React App (CRA)

Se você criou seu projeto com Create React App, saiba que não é possível modificar configurações de Jest diretamente (como jest.config.js ou babel.config.js) sem ejetar o projeto. Por isso, o ideal é usar o setupTests.ts para qualquer configuração personalizada.

Caso você não esteja usando CRA ou deseje ter controle total das configurações do Jest, recomendamos conferir este conteúdo sobre como configurar Jest manualmente em um projeto React:

Como Instalar e Configurar Jest em Projetos React ou Next.js

O que vamos testar?

Verificaremos se o componente é renderizado corretamente, se o redirecionamento ocorre ao não encontrar o token, e se as atualizações de estado (userAccess e userSettings) funcionam como esperado.

setupTests.ts: Configurando o ambiente de testes

Esse arquivo é essencial para simular o localStorage, e useNavigate do react-router-dom.

jest.mock("react-router-dom", () => ({
  useNavigate: () => mockNavigate,
}));

let store: Record<string, string> = {};

beforeEach(() => {
  store = {
    access: "válido",
    token: "válido",
    settings: "válido",
    user: "válido",
    name: "válido",
  };

  Storage.prototype.getItem = jest.fn((key) => store[key] ?? null);
  Storage.prototype.setItem = jest.fn((key, value) => {
    store[key] = value;
  });
  Storage.prototype.removeItem = jest.fn((key) => {
    delete store[key];
  });
  Storage.prototype.clear = jest.fn(() => {
    store = {};
  });
});

JSON.parse = jest.fn();

Estrutura do Contexto

Nosso AuthContext fornece o token, o user, e funções para atualizar os acessos e configurações:

export const AuthContext = createContext<AuthContextType | null>(null);

export const AuthProvider = ({ children }) => {
  const [token, setToken] = useState(() => localStorage.getItem("token"));
  const [user, setUser] = useState<AuthContextType["user"]>(null);
  const navigate = useNavigate();

  useEffect(() => {
    if (!token) navigate("/");
  }, [token, navigate]);

  
  useEffect(() => {
    const access = localStorage.getItem("access");
    const settings = localStorage.getItem("settings");
   
    setUser({
      user: localStorage.getItem("user"),
      acessos: JSON.parse(access || ""),
      configuracoes: JSON.parse(settings || ""),
      nome: localStorage.getItem("name")
    });
  }, []);

  const updateUserAccess = (validate: {
    estabelecimentos: typeEstabelecimento[];
    projeto: typeProject[];
  }) => {
    setUser((prev) => {
      if (!prev) return null;

      return {
        ...prev,
        acessos: validate || [],
      };
    });
  };

  const updateUserSettings = (validateCurrenteValue: {
    estabelecimento_atual: string;
    projeto_atual: string;
  }) => {
    setUser((prev) => {
      if (!prev) return null;

      return {
        ...prev,
        configuracoes: validateCurrenteValue || [],
      };
    });
  };

  return (
    <AuthContext.Provider value={{ token, user, updateUserAccess, updateUserSettings }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  const context = useContext(AuthContext);

  if (!context) {
    throw new Error("useAuth deve ser usado dentro de um AuthProvider");
  }

  return context;
};

Escrevendo os testes com React Testing Library

Criando um component para simulação

const FakeComponent = ({
  userAccess,
  userSettings,
}: {
  userAccess?: any;
  userSettings?: any;
}) => {
  const { token, user, updateUserAccess, updateUserSettings } = useAuth();

  return (
    <div data-testid="component">
      <button onClick={() => updateUserAccess(userAccess)}>
        Atualizar acesso
      </button>
      <button onClick={() => updateUserSettings(userSettings)}>
        Atualizar Configurações
      </button>
      <p>Pronto</p>
      <p data-testid="token">{token}</p>
      <p data-testid="user">{JSON.stringify(user)}</p>
    </div>
  );
};

Renderização correta

it("it should success", () => {
  render(
    <AuthProvider>
      <FakeComponent />
    </AuthProvider>
  );

  expect(screen.getByText("Pronto")).toBeInTheDocument();
  expect(screen.getByTestId("token").textContent).toBe("válido");
  expect(screen.getByTestId("user").textContent).not.toBe("null");
});

Redirecionamento ao não encontrar token

it("redirects to login page if token is missing", () => {
  localStorage.setItem("token", "");
  render(
    <AuthProvider>
      <FakeComponent />
    </AuthProvider>
  );

  expect(screen.getByTestId("token").textContent).not.toBe("válido");
  expect(mockNavigate).toHaveBeenCalledWith("/");
});

Atualizando acesso e configurações

it("updates user access and settings", () => {
  render(
      <AuthProvider>
        <FakeComponent
          userAccess={{
            estabelecimentos: [{ id: "1", nome: "Estabelecimento 1" }],
            projeto: [{ id: "1", nome: "Projeto 1" }],
          }}
          userSettings={{
            estabelecimento_atual: "Estabelecimento 2",
            projeto_atual: "Projeto 2",
          }}
        />
      </AuthProvider>
    );

  fireEvent.click(screen.getByText("Atualizar acesso"));
  fireEvent.click(screen.getByText("Atualizar Configurações"));

  const userText = screen.getByTestId("user").textContent;
    expect(userText).toContain("Estabelecimento 1");
    expect(userText).toContain("Projeto 1");
    expect(userText).toContain("Estabelecimento 2");
    expect(userText).toContain("Projeto 2");
});

Criar testes para seu AuthContext garante que seu sistema de autenticação esteja seguro e funcionando como esperado. Com o setupTests.ts, você pode simular cenários reais com localStorage, navegação e funções externas.