rocketseat-creators-program / redux-toolkit-testing-30-03-22

Material da aula de testes com Redux toolkit

Testes com Redux Toolkit

Nesta aula, vamos aprender como testar o nosso aplicativo com Redux Toolkit, para isso vamos criar juntos uma aplicação ao estilo airbnb, com uma listagem e filtragem de dados, dai vamos aprender sobre filosofia de testes e como como testar o nosso aplicativo passo a passo!

Primeiros passos 🏁

Clone o repositório.

[email protected]:rocketseat-experts-club/redux-toolkit-testing-30-03-22.git
redux-toolkit-testing

cd no diretório.

cd redux-toolkit-testing

Instale as dependências do projeto:

yarn install

Por ultimo vamos iniciar o servidor:

yarn start

obs pra esse projeto nos estamos utilizando JSON api para simular o backend, para iniciar o servidor, vamos utilizar o comando:

Inicie o servidor de desenvolvimento:

yarn start:server

com isso vamos ter acesso ao nosso servidor que esta rodando na porta 3001, para testar o nosso aplicativo

Finalmente, vá para localhost: 3000 no navegador de sua escolha e você está pronto para ir 🚀.

Ferramentas 🧰

• Jest: Um framework de testes para JavaScript.
• React Testing Library: Um framework de testes para React.
• Redux Toolkit como framework de fluxo de dados
• React como uma linguagem de IU
• Redux como gerenciador de estado
• TailwindCss UI como nosso kit de ferramentas de design

Estrutura do Projeto 🏗

src
├── App.tsx (componente principal)
├── app (arquivo de configuração)
│   ├── hooks.ts
│   └── store.ts
├── components (componentes reutilizáveis)
│   ├── HeartIcon.tsx
│   ├── Map.tsx
│   ├── Search.tsx
│   └── SearchIcon.tsx
├── features (módulos)
│   └── home
├── images
│   └── GoogleMapTA.webp
├── index.css
├── index.tsx
├── mocks (mocks de dados para testes)
│   └── results.ts
├── react-app-env.d.ts
├── serviceWorker.ts
├── setupTests.ts
└── test-utils.jsx  (utilidades para testes)

Expert

Vitor Alencar

Licença

Projetado com ♥ por vitormalencar. Licenciado sob a Licença MIT.