## 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](https://devtrail.com.br/como-instalar-e-configurar-jest-em-projetos-react-ou-nextjs) ## 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`. ```ts jest.mock("react-router-dom", () => ({ useNavigate: () => mockNavigate, })); let store: Record = {}; 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: ```tsx export const AuthContext = createContext(null); export const AuthProvider = ({ children }) => { const [token, setToken] = useState(() => localStorage.getItem("token")); const [user, setUser] = useState(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 ( {children} ); }; 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 ```tsx const FakeComponent = ({ userAccess, userSettings, }: { userAccess?: any; userSettings?: any; }) => { const { token, user, updateUserAccess, updateUserSettings } = useAuth(); return (

Pronto

{token}

{JSON.stringify(user)}

); }; ``` ### Renderização correta ```tsx it("it should success", () => { render( ); 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 ```tsx it("redirects to login page if token is missing", () => { localStorage.setItem("token", ""); render( ); expect(screen.getByTestId("token").textContent).not.toBe("válido"); expect(mockNavigate).toHaveBeenCalledWith("/"); }); ``` ### Atualizando acesso e configurações ```tsx it("updates user access and settings", () => { render( ); 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.

Todos os Artigos

Blog DevTest

Categorias