IA no front-end: criando testes de unidade com a Luri

Empoderando seu código com IA - Apresentação

Vinicios: Olá, como vai? Meu nome é Vinicios Neves. Estou aqui, muito bem acompanhado, para adentrarmos um pouco no universo dos testes.

Paulo: Eu sou o Paulo Silveira e estou aqui com o Vinny, porque nós queremos ir além dos testes no front-end do React. Queremos mostrar a você que, com um pouco de inteligência artificial, é possível obter benefícios para que estes testes, independentemente do framework que estamos utilizando, possam realmente acelerar o desenvolvimento.

A sintaxe não é tão trivial, existem muitas funções e muitas configurações. No nosso caso, a Luri será muito útil para nós, certo, Vinny?

Vinicios: Exatamente. Vamos conversar com a Luri, pois são conceitos que já aprendemos nos cursos anteriores relacionados ao React Testing Library (RTL), como renderizar um componente e coisas do tipo. Então, nós já temos o conhecimento necessário e vamos vincular os assuntos.

Com uma base sólida sobre os testes, vamos aprofundar mais, maximizando a produtividade usando IA generativa.

Paulo: Exatamente, Vinny. Neste curso em particular, vamos utilizar os conceitos mais modernos em testes. Além disso, com a intenção de observar o que está acontecendo no mercado de front-end reativo, não vamos mais usar o Create React App.

Por isso, preste muita atenção, pois é um curso bastante distinto, que tira proveito do que há de mais moderno em front-end, em React e também em Inteligência Artificial.

Caso você não tenha acesso à Luri, também pode usar o GPT ou o Bard. Cada um apresentará resultados ligeiramente diferentes. Quem tem a Luri na Alura tirará maior proveito, pois terá o contexto dos cursos, da transcrição e dos nossos exercícios.

Vinicios: Então, se você já tem conhecimento sobre React e testes unitários, já está pronto para começar a codar. Te esperamos na primeira aula para começarmos a preparar a infraestrutura, executar o primeiro teste e usar a Luri para nos auxiliar nesta missão.

Empoderando seu código com IA - Vitest, para que te quero?

Vinicios: Bom, então, chegou a hora de conhecermos um pouco do Cooking Up, essa aplicação que vamos precisar testar. Não é, Paulo?

Paulo: Isso aí.

Vinicios: Essa aplicação foi construída em React, já fizemos o download e ela está no nosso VS Code.

O link para download da aplicação Cooking Up estará disponível nas atividades desta aula.

Ela foi desenvolvida com o React, utilizando o Vite e JavaScript.

Paulo: O Vite é uma ferramenta nova, certo? Uma alternativa ao Create React App?

Exatamente. Hoje em dia, o Create React App não é recomendado para novas aplicações. Uma das alternativas é o Vite, por isso que estamos seguindo com ele.

Os conceitos de teste serão os mesmos, seja usando um ou outro. A única mudança é na infraestrutura. É exatamente disso que vamos tratar agora.

Paulo: Neste caso, temos uma aplicação que já existia. Frequentemente, quando chegamos em uma empresa ou quando migramos de um projeto para outro, trabalhamos com projetos que já estão prontos. É raro começarmos do zero.

E quando pegamos esse projeto, às vezes temos tarefas que precisamos realizar, como adicionar uma nova feature, modificar algo no banco de dados ou atualizar porque não tem testes.

O conteúdo desse curso também serve de aprendizado para quem está aprendendo sobre testes ou para quem tem uma nova aplicação e quer se aprofundar nos diretórios do VS Code. Sendo assim, entender e conhecer uma aplicação que nos foi entregue pronta é fundamental, apesar de ser um mais desafiador.

Raramente entendemos todos os aspectos da aplicação, e normalmente recebemos somente tarefas e um monte de código. Esse processo é muito comum no mercado de trabalho.

Vinicios: Exatamente. Acredito que é o padrão. Raramente iniciamos uma aplicação do zero. Às vezes, trabalhamos com tarefas de vários projetos diferentes.

Podemos aproveitar esse momento para treinar a leitura de código e entender como o que foi feito funciona. A partir disso, vamos testar esses componentes.

A primeira coisa que precisamos fazer é acessar o VS Code e verificar o arquivo package.json, que possui a configuração do projeto e ver o que tem disponível para nós.

Por padrão, o Vite não traz testes. Antigamente, com o Create React App, um conjunto mínimo de teste estava disponível, aqui não é o caso.

Nesse sentido, para nos prepararmos, primeiro precisamos instalar as dependências necessárias.

Paulo: Ou seja, os pacotes que o NPM buscará quando executarmos o Vite.

Vinicios: Exatamente. Nosso primeiro passo é abrir o terminal na pasta onde está o projeto — no caso deste vídeo, ele está na área de trabalho, na pasta "cooking-up" — digitar npm i -D e colar todas as dependências, para não ter que digitar comandos repetidamente.

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

A nossa aplicação é em React, portanto, a primeira dependência a ser instalada é o jest-dom. Ela serve para simular um ambiente de navegador, visto que estamos realizando um teste e, portanto, estamos em um terminal com um ambiente de Node.

Paulo: Depois de digitarmos todos os comandos, o arquivo package.json é alterado.

Vinicios: Isso.

Paulo: Poderíamos também fazer o contrário, alterar o package.json e escrever várias linhas?

Vinicios: Sim. No entanto, se fizéssemos isso, teríamos que especificar a versão de cada um desses pacotes no package.json. Pelo terminal, o NPM trata disso para nós. Como não passamos nenhum parâmetro, ele vai configurar a versão mais recente de cada um deles.

Vamos entender as dependências a serem instaladas:

• O jest-dom é oriundo do Testing Library do React;
• O user-event é um pacote adicional do Testing Library que está relacionado à maneira como a pessoa usuária interage com os componentes;
• O jsdom está relacionado à forma como nosso ambiente de teste lidará com os componentes;
• A ferramenta Vitest, que procura por todos os arquivos de teste e executa os testes encontrados neles.

Depois de pressionarmos "Enter", o terminal se encarregará de instalar e atualizar o package.json, baixando tudo o que é necessário. Quando terminar, estaremos prontos para dar o próximo passo: entender como executar esses testes em um ambiente Vite.

Empoderando seu código com IA - Preparando o projeto

Vinicios: Agora nosso projeto já está com todas as dependências instaladas. Podemos verificar isso visualmente do VS Code, que nos mostra no arquivo package.json que as dependências foram acrescentadas.

// Código omitido
}
    "devDependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.3",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
        "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
        "eslint-plugin-react-refresh": "^0.4.3",
    "jsdom": "^22.1.0",
    "vite": "^4.4.5",
    "vitest": "^0.34.1"
}

Precisamos criar um script (atalho) que vai orientar o comportamento do sistema durante os testes. Para isso, acessaremos o interior das chaves do primeiro bloco do arquivo atual. Abaixo de "preview", criaremos uma nova instrução que será nomeada "teste". Esse novo comando vai executar o vitest.

{
  "name": "cooking-up",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "teste": "vitest"
},
}
    "devDependencies": {
    
    // Código omitido
    }
}

Vamos entender que está sendo feito aqui?

Por padrão, nós temos scripts para desenvolvimento e compilação (dev e build), que são usados durante o processo de desenvolvimento ou quando vamos compilar nossa aplicação para publicação. O novo comando que acabamos de criar serve para realizar testes em nossa aplicação.

Com isso estabelecido, já podemos realizar experimentos para verificar se está funcionando.

Ciente de que estamos trabalhando no universo do Vite, precisamos realizar as configurações que essa ferramenta espera. Para tanto, temos um arquivo nomeado vite.config.js, que neste momento, contém apenas o plugin do React.

Em seu interior, acessaremos o final da linha plugins: [react()] e pressionaremos "Enter". Na nova linha, vamos ditar como esse plugin se comportará durante os testes acrescentando um test:.

Como já temos esse arquivo tipado, o VS Code é capaz de nos auxiliar na digitação sugerindo se estamos nos referindo ao test, que é exatamente o caso. Vamos clicar na sugestão "test?" proveniente do local "UserConfig.test?: inlineConfig_" para inseri-la no código.

À direita de test, adicionaremos um bloco de chaves.

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    
    }
})

Existem diversas opções de configuração que poderiam ser feitas entre essas chaves, mas vamos nos ater ao mínimo possível. Precisamos configurar os globals, instruindo que todas as variáveis globais da aplicação estarão disponíveis no interior de test. Isso implica que globals precisam ser declarados como true.

Abaixo de globals, a segunda etapa é a criação de setpFiles (arquivos de configuração). Caso exista alguma instrução que será comum a todos os testes, podemos configurá-la no arquivo JavaScript. Esse arquivo preparará todos os testes que serão realizados, evitando a necessidade de repetir instruções a cada novo teste.

Evidentemente, esse arquivo ainda não existe, então irei criá-lo em setupFiles, chamando-o de ./setupFile.js entre aspas duplas.

Por fim, abaixo de setupFiles, precisamos indicar qual é o nosso ambiente. Nesse caso, será o environment, que acabamos de instalar e discutir anteriormente: o Jest DOM, que chamaremos de jsdom entre aspas duplas.

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
        globals: true,
        setupFiles: "./setupFile.js"
        environment: "jsdom"
    }
})

Paulo: Sabemos que muitas pessoas que estudam conosco podem se deparar com a quantidade de configurações necessárias e pensar que isso pode ser complicado.

O objetivo de escrever o teste é garantir que, sempre que modificarmos nossa aplicação e a implementarmos, não teremos alterado inadvertidamente alguma funcionalidade que deveria estar operando de determinada maneira.

Este é o pilar do teste: sempre que algo é alterado, é preciso garantir que essa mudança não prejudicou as funções previamente existentes. Dessa maneira, apesar de desejarmos começar a escrever os testes o mais rápido possível, é imprescindível que a base esteja corretamente configurada para evitar problemas.

Apesar de parecer um processo de "copia e cola", cada etapa apontada aqui é importante. Informamos que o JSDOM é o ambiente utilizado e que todas as variáveis globais também são visíveis no teste porque senão alguns problemas podem ocorrer futuramente.

Vinicios: Comparando o processo antigo, que fazia uso do Create React App, com o processo atual do Vite, uma diferença considerável pode ser observada. Quando fazíamos uso do CRA (Create React App), havia a presunção de que todas as ferramentas do ecossistema seriam utilizadas, e todas já vinham previamente instaladas. Nesse caso, era comum criarmos uma aplicação e removermos coisas que não iríamos usar.

Paulo: O Vite propõe uma abordagem diferente.

Vinicios: Sim, o Vite sugere a inclusão do mínimo necessário, e então incluímos o restante. Por exemplo, aqui usaremos o mecanismo Vitest, mas poderíamos também usar Jest, Jasmine ou outras bibliotecas de teste. Portanto, ele funciona mais como um self-service, permitindo que o configuremos manualmente, do jeito que preferirmos.

Isto requer que digitemos um pouco de infraestrutura, e isso faz parte. Se pensarmos no modelo de aprendizado Dev em T, é como se estivéssemos entrando um pouco na área de infraestrutura.

Estamos preparando uma base para rodar esses testes, que podem ser executados em um pipeline ou localmente, por exemplo, antes de fazermos um commit.

Resumindo, estamos expandindo as habilidades do T para os lados.

Agora, antes de finalizarmos por agora, vamos criar o arquivo ausente setupFile por meio do explorador, dentro da pasta raiz. Em seu interior, vamos importar uma das bibliotecas que instalamos anteriormente: a jest-dom.

import "@testing-library/jest-dom"

Para deixar claro, qualquer coisa que rodarmos ao nível de teste, eu quero que essa biblioteca, a testing-library/jest-dom, esteja disponível. Queremos que ela esteja disponível, pois vamos usar mecanismos de interação com o componente e algumas validações que precisarão desta biblioteca disponível.

Se não fizermos isso, esta linha deverá ser repetida em todos os testes que realizarmos. Portanto, o ponto é: preparamos o ambiente de tal forma que este é o mínimo necessário globalmente para qualquer teste. Qualquer coisa que seja mais específica que isso, estará no teste em si.

Agora que já começamos a trabalhar com infraestrutura, estamos prontos para escrever o primeiro teste.

Paulo: Devemos lembrar que estes códigos também estão descritos no repositório do projeto, caso prefira não escrever esses trechos menores, pois há muita margem para erro.

Compreendemos o incômodo, mas gostaríamos que você os escrevesse. Pois o exercício de escrever os comandos de configuração mesmo sem entender totalmente por que estamos configurando é um desafio pelo qual todos passam. Você precisa vivenciar e superar esse momento.

Entendo que você queira ir direto para o teste. Porém, é importante entender a diferença no Vite e porque ele é mais comum do que o Create React App. É importante compreender que parte realiza qual configuração.

E ao escrever isso, ficará um pouco mais claro o que estamos falando.

Vinicios: Exatamente. Depois de se preparar, estaremos te esperando no próximo vídeo.

Sobre o curso IA no front-end: criando testes de unidade com a Luri

O curso IA no front-end: criando testes de unidade com a Luri possui 77 minutos de vídeos, em um total de 35 atividades. Gostou? Conheça nossos outros cursos de IA para Front End em Inteligência Artificial, ou leia nossos artigos de Inteligência Artificial.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Empoderando seu código com IA
• Expandindo os Testes com a Luri
• Expandindo os testes com a Luri
• Cobertura de código