Testes com Redux Toolkit

O objetivo dessa aplicação é por em prática alguns dos conceitos aprendidos na aula sobre testes com Redux Toolkit do mito Vitor Alencar na plataforma do Experts Clubs.

Além dos testes de reducers, também realizei testes dos seletores e adicionei também outros testes unitários.

Scripts disponíveis 🏁

Rodar o projeto localmente:

npm run dev

Rodar todos os testes:

npm run test

Rodar os testes apenas das modificações:

npm run test:staged

Rodar o coverage:

npm run test:cov

Ferramentas 🧰

• Husky: Ferramenta de git hooks (em todo commit, o script: test:staged é executado)
• MSW: Service Worker para mockar a integração http nos testes e na aplicação.
• React Testing Library: Um framework de testes de UI para React.
• React como uma linguagem de IU.
• Redux Toolkit como framework de fluxo de dados.
• Redux como gerenciador de estado.
• TailwindCss UI como nosso kit de ferramentas de design.
• Vite: Bundler javascript utilizado para "buildar" a aplicação.
• Vitest: Um test runner utilizado junto ao Vite.

Estrutura do Projeto 🏗

src
├── app (arquivos de configuração da store)
│   ├── hooks.ts
│   ├── store.ts
│   └── combinedReducers.ts
├── assets (local para armazenar assets, imagens, vídeos ...)
├── components (componentes reutilizáveis)
├── features (módulos)
│   └── locations
│      ├── components
│      ├── pages
│      ├── services
│      └── slices
├── infra
│   └── HttpClient.ts (instância configurada do cliente http)
├── hooks (hooks reutilizáveis)
├── mocks
│   ├── data (jsons utilizados como mock)
│   ├── handlers (funções executadas ao mockar requisições http)
│   ├── browser.ts (responsável pelos mocks no contexto do navegador)
│   └── server.ts (responsável pelos mocks no contexto do servidor)
├── tests
│   ├── features (testes funcionais)
│   └── unit (testes unitários)
│      ├── components
│      ├── reducers
│      ├── selectors
│      └── services
│   ├── setup.ts (responsável por executar o setup do msw durante os testes)
│   └── testUtils.ts (permite a execução de testes de integração da UI com a Store)
├── types
│   └── entities (interfaces que reprentam o domínio da aplicação)
├── App.tsx (componente principal)
├── index.css
└── main.tsx

Produzido com 🤘 por Alisson Gabriel.