arthurproc

Como fazer um mock do fetch

Nos exemplos abaixo, substitua valorRetornadoPelaAPI pelo valor o qual você deseja que a API retorne ao realizar o fetch.

Mock manual

⚠️ Dessa forma não será possível utilizar um expect para verificar por exemplo se a função fetch foi chamada durante o seu teste.

arthurproc

Configurando Vitest + RTL + Typescript

• Criar uma nova aplicação Vite se ainda não foi criada npm create vite@latest

Siga os passos para criar uma aplicação React com TS.

• Instalar as dependências necessárias

npm i -D vitest jsdom @testing-library/jest-dom @testing-library/react @testing-library/user-event 

arthurproc

Typescript + React

Criando e configurando um novo projeto

Siga estes passos para criar um novo projeto com Typescript e React utilizando Vite.

1. Criar o projeto

arthurproc

useEffect

O que é o hook useEffect?

O useEffect é um hook no React que permite realizar "efeitos colaterais" em componentes funcionais. Em outras palavras, é uma forma de executar algumas ações depois que o componente foi renderizado, atualizado ou antes de ser desmontado.

Os efeitos colaterais podem ser qualquer coisa que interage com o mundo fora do componente React, como:

• Fazer uma solicitação para buscar dados de uma API
• Inscrever-se (ou desinscrever-se) em eventos do DOM, como mostrado abaixo

arthurproc

Checklist do Redux

• Antes de começar

  • pensar como será o formato do seu estado global
  • pensar quais actions serão necessárias na sua aplicação

• Instalação

  • npm i redux react-redux @redux-devtools/extension

• Criar diretórios do Redux:

arthurproc

Checklist do Context

• Antes de começar

  • Pense em quais informações você pretende compartilhar no Context
  • Pense quais componentes vão precisar acessar e/ou modificar essas informações.

• Criar arquivos na pasta src/context:

  • Arquivo src/context/example-context.ts.
  • Arquivo src/context/example-provider.tsx.

arthurproc

Tipos de dados em JS

1. Tipos primitivos
2. Tipos de referência (Objetos)

Tipos Primitivos

• Números
• Strings
• Booleans