Postado em 4 de janeiro de 2023

Instalar e configurar o Jest + TypeScript com Babel

Atalhos

Pré-Requesitos

Na verdade você só vai precisar já ter o TypeScript configurado em seu projeto, afinal não vamos instalar ele do zero aqui.

Instalando o Jest + Habilitando uso de typescript

Bem primeiro vamos executar o comando para instalar tanto o jest quanto os módulos que iremos precisar para trabalhar com typescript, eu irei instalar com yarn.

Com NPM
npm install –save-dev @babel/preset-typescript @types/jest

Com Yarn
yarn add –dev jest @babel/preset-typescript @types/jest

Após a instalação vamos configurar o Jest

Habilitando o Jest no ESLint

Vá no seu arquivo .eslintrc.json e na parte de “env” deixe igual o meu, estamos habilitando o jest e o node, embora não vamos utilizar o node o jest vai utilizar a nomemclatura.

Agora vamos criar um arquivo de configuração para o Jest

Há apenas uma observação, se você instalar o jest com jest init ele já cria o arquivo e a configuração básica para você, porém eu estou fazendo do zero.

Outra questão é, não tem como eu personalizar o meu Jest aqui e você utilizar ele da mesma forma, cada projeto é um projeto você vai ter que ler a documentação do Jest e ver o que você vai querer submeter há testes.

E após as considerações acima, vamos lá finalmente criar um arquivo na raiz chamado de jest.config.js e dentro dele teremos algumas configurações, veja a foto:

O ESLint já pegou alguns erros, mas não se preocupe, depois vou resolver.

 

Configurando o Babel

Crie um arquivo .babelrc na raiz do seu projeto e insira estas configurações se você estiver trabalhando com next assim como eu, caso contrário você terá que ver na documentação o que você vai utilizar para o framework que você estiver trabalhando, deixarei aqui a forma que eu utilizei e a forma que está default na documentação:

A forma que eu fiz

Como é na documentação

 

Criando a pasta jest + o arquivo setup.ts

Crie uma pasta com o nome jest e dentro dela coloque um arquivo setup.ts, neste arquivo é aonde ficarão as coisas que você vai importar para utilizar junto com o jest.

Agora vamos voltar no nosso arquivo package.json e definir o comando test que vai executar o jest, veja a imagem.

Agora toda vez que rodarmos yarn test ele executará o jest.

Pronto meu amigo, agora você poderá configurar seus teste, sugiro para configurar os testes React Testing Library é o que vou utilizar neste projeto e se você não sabe como utilizar ou configurar temos um Tutorial sobre React Testing Library.