DEV Community: Helton Carlos Brito Silva

Vue 3 e Keep alive

Helton Carlos Brito Silva — Thu, 12 Mar 2026 11:32:06 +0000

Recentemente, me deparei com um problema frustrante em um cenário muito específico de navegação por abas. A tela possuía duas abas principais: uma de Dúvidas (FAQ) e outra com um Formulário.

O gargalo acontecia durante o preenchimento: se o usuário estivesse no meio do formulário, tivesse uma dúvida e clicasse na aba de Dúvidas para ler algo, ao retornar para a aba do Formulário, todos os dados digitados haviam desaparecido. O componente era destruído e recriado do zero.

A Solução Inicial (e trabalhosa):

Minha primeira intuição foi recorrer a uma abordagem clássica: salvar os dados momentaneamente no localStorage a cada alteração e, ao final do envio do formulário, limpar essa chave. Embora funcione, é uma solução que exige muito código manual e gerenciamento de estado externo.

A Solução Elegante com Vue:

Buscando uma alternativa mais limpa, lembrei-me do . No Vue, ele é um componente embutido (built-in) e abstrato, o que significa que ele não renderiza nenhum elemento HTML real como uma tag div. Ele atua apenas como um "gerente invisível" no Virtual DOM, instruindo o Vue a fazer o cache do componente em vez de destruí-lo ao trocar de aba. Assim, o formulário e suas informações permanecem intactos na memória, melhorando a experiência do usuário com pouquíssimo esforço.

1º Página que recebe as abas

<script setup lang="ts">
import { shallowRef } from "vue";
import AbaFormulario from "../components/AbaFormulario.vue";
import AbaDuvidas from "../components/AbaDuvidas.vue";

const abaAtual = shallowRef(AbaFormulario);
</script>

<template>
  <div class="container-abas">
    <nav class="botoes-abas">
      <button
        :class="{ ativo: abaAtual === AbaFormulario }"
        @click="abaAtual = AbaFormulario"
      >
        Preencher Formulário
      </button>

      <button
        :class="{ ativo: abaAtual === AbaDuvidas }"
        @click="abaAtual = AbaDuvidas"
      >
        Dúvidas Frequentes
      </button>
    </nav>

    <div class="conteudo-aba">
      <KeepAlive>
        <component :is="abaAtual" />
      </KeepAlive>
    </div>
  </div>
</template>

<style scoped>
.ativo {
  font-weight: bold;
  background-color: #e0e0e0;
  color: var(--black);
}

.botoes-abas {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
</style>

O KeepAlive ele envolve o componentes dinâmico, no exemplo uso abas, mas poderia ser páginas também, pode ser qualquer arquivo .vue

2º Componente de AbaFormulario

<script setup lang="ts">
import { ref, onActivated, onDeactivated } from "vue";

const formData = ref({
  nome: "",
  email: "",
  mensagem: "",
});

onActivated(() => {
  console.log("Formulário ATIVADO (Recuperado do cache)");
});

onDeactivated(() => {
  console.log("Formulário DESATIVADO (Guardado no cache)");
});
</script>

<template>
  <div class="formulario-container">
    <h2>Preencha seus dados</h2>
    <p>Comece a digitar, troque de aba e volte. Seus dados estarão aqui!</p>

    <form @submit.prevent>
      <div class="campo">
        <label>Nome:</label>
        <input
          v-model="formData.nome"
          type="text"
          placeholder="Digite seu nome"
        />
      </div>

      <div class="campo">
        <label>E-mail:</label>
        <input
          v-model="formData.email"
          type="email"
          placeholder="Digite seu e-mail"
        />
      </div>

      <div class="campo">
        <label>Mensagem:</label>
        <textarea
          v-model="formData.mensagem"
          rows="4"
          placeholder="Sua dúvida ou solicitação..."
        ></textarea>
      </div>

      <button type="button">Enviar</button>
    </form>
  </div>
</template>

<style scoped>
.formulario-container {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.campo {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

input,
textarea {
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #999;
  border-radius: 4px;
}

button {
  padding: 10px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

Veja que usamos o console.log para ver os gatilhos do ciclo.

onActivated()

Regista uma função de resposta a ser chamada depois da instância do componente for inserida no DOM como parte duma árvore armazenada para consulta imediata pelo .

onDeactivated()

Regista uma função de resposta a ser chamada depois da instância do componente ser removida do DOM como parte duma árvore armazenada para consulta imediata pelo .

3º Componente de AbaDuvidas

<script setup lang="ts"></script>

<template>
  <div class="duvidas-container">
    <h2>Dúvidas Frequentes (FAQ)</h2>
    <p>Aqui estão as respostas para as perguntas mais comuns.</p>

    <div class="faq-item">
      <h3>Preciso preencher todos os campos do formulário?</h3>
      <p>
        Sim, todos os campos são obrigatórios para que possamos entrar em
        contato de forma eficiente.
      </p>
    </div>

    <div class="faq-item">
      <h3>Qual o prazo de resposta?</h3>
      <p>Nossa equipe geralmente responde em até 24 horas úteis.</p>
    </div>
  </div>
</template>

<style scoped>
.duvidas-container {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: var(--black);
}

.faq-item {
  margin-top: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ccc;
}

h3 {
  margin-bottom: 5px;
  color: var(--white);
  font-size: 1.1em;
}
</style>

Cuidados com o keep alive

Caso você precise carregar a página com reload, ele irá perde os dados, já que ele fica guardado nos componentes em memória (cache).
Usamos o keep alive no lado do cliente, ótimo em aplicações SPA.

Referência:

https://pt.vuejs.org/guide/built-ins/keep-alive
https://learnvue.co/articles/vue-keep-alive
https://pt.vuejs.org/api/composition-api-lifecycle

Nuxt 3 e Cloudflare

Helton Carlos Brito Silva — Thu, 04 Sep 2025 19:20:19 +0000

O Cloudflare Turnstile é uma solução leve, sem CAPTCHA visual, projetada para validar formulários e proteger aplicações contra bots. No Nuxt 3, sua integração pode ser feita de forma simples por meio do módulo nuxt-turnstile.

1º Instalar o módulo

Execute no terminal dentro do projeto:

npm install @nuxtjs/turnstile
ou
yarn add @nuxtjs/turnstile

2º Configuração no cloudflare

Para gerar suas chaves, acesse o Cloudflare, crie uma conta gratuita e vá até a aba Turnstile. Clique em Adicionar Widget e, em seguida, será exibida a página de configuração do widget.

Adicione o nome do seu site ou projeto e, em seguida, clique em Adicionar nomes de host para cadastrar o domínio da sua aplicação.
Se você ainda não possui um domínio, pode criar um gratuitamente em um serviço de hospedagem e utilizá-lo apenas para testes. Após isso, insira o domínio no campo indicado e finalize clicando no botão Adicionar.

Exemplo:

Feito isso, irá gerar duas chaves:

3º Criando config no seu projeto

Crie um arquivo .env caso não tenha e adicione suas duas chaves.
Os valores a baixo serão apenas ilustrativos:

TURNSTILE_SITE_KEY = '1x00000000000000000000AA'
TURNSTILE_SECRET_KEY = '0x4XXXXXXXXXXXXXXS_aacaDSD'

Vá ate a arquivo nuxt.config.ts.

export default defineNuxtConfig({
  modules: ["@nuxtjs/turnstile"],

  runtimeConfig: {
    turnstile: {
      secretKey: process.env.TURNSTILE_SECRET_KEY, 
    },
    public: {
      turnstile: {
        siteKey: process.env.TURNSTILE_SITE_KEY, 
      }
    }
  }
})

Localize o componente no qual deseja integrar o Cloudflare Turnstile. Um exemplo comum é em formulários simples, como login ou cadastro:

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  email: '',
  password: ''
})

const turnstileToken = ref('')

const handleSubmit = () => {
  if (!turnstileToken.value) {
    alert('Valide o Turnstile antes de enviar!')
    return
  }

  console.log('Formulário enviado:', {
    ...form.value,
    turnstileToken: turnstileToken.value
  })
}
</script>

<template>
  <form
    class="max-w-sm mx-auto space-y-6 p-6 border rounded-xl shadow-lg bg-white"
    @submit.prevent="handleSubmit"
  >
    <h2 class="text-2xl font-bold text-center">Login</h2>

    <div>
      <label class="block text-sm font-medium mb-1">Email</label>
      <input
        v-model="form.email"
        type="email"
        placeholder="E-mail"
        class="w-full px-3 py-2 border rounded-md focus:ring focus:ring-blue-400"
        required
      />
    </div>

    <div>
      <label class="block text-sm font-medium mb-1">Senha</label>
      <input
        v-model="form.password"
        type="password"
        placeholder="Password"
        class="w-full px-3 py-2 border rounded-md focus:ring focus:ring-blue-400"
        required
      />
    </div>

    <NuxtTurnstile
      v-model="turnstileToken"
      :options="{
        theme: 'auto',
        size: 'normal',
        action: 'login',
        language: 'pt-BR'
      }"
    />

    <button
      type="submit"
      class="w-full py-2 px-4 bg-blue-600 text-white font-semibold rounded-lg shadow hover:bg-blue-700 transition"
    >
      Entrar
    </button>
  </form>
</template>

Como deve aparecer:

Para validar o token recebido do front-end, você precisa da key secret no lado do seu projeto back-end.

Referência:

https://nuxt.com/modules/turnstile
https://github.com/nuxt-modules/turnstile

Nuxt3 e DaisyUi

Helton Carlos Brito Silva — Wed, 19 Mar 2025 17:22:01 +0000

Torne seu desenvolvimento tailwind CSS mais rápido, limpo e fácil.

DaisyUI é o plugin Tailwind CSS, você pode usar em diversos Frameworks.
Ele fornece nomes de classe de componente úteis, ajuda a escrever menos código e construir componentes de forma mais rápido, usa um design sofisticado e atual.

Nos exemplos abaixo irei usar o gerenciador de pacotes npm.

1º Etapa - Instalação do Nuxt3.

Para esse exemplo iremos usar o Nuxt3

npm create nuxt project-daisyui

2º Etapa - Adicione o TailwindCss.

Vá para dentro do projeto e adicione esse comando no seu terminal:

npm install --save-dev @nuxtjs/tailwindcss

Depois vá a modules no arquivo nuxt.config.{ts,js}

export default defineNuxtConfig({
  css: ['~/assets/main.css'],
  modules: [
    '@nuxtjs/tailwindcss'
  ]
}

Depois crie o arquivo main.css e adicione:

@tailwind base;
@tailwind components;
@tailwind utilities;

Documentação: https://nuxt.com/modules/tailwindcss

3º Etapa - Adicione o Daisyui.

npm i -D daisyui@latest

Adicione o arquivo tailwind.config.{ts,js}, depois coloque o plugin daisyui:

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [
    require('daisyui'),
  ],
  daisyui: {
    themes: true,
    darkTheme: "dark",
    base: true,
    styled: true, 
    utils: true, 
    prefix: "",
    logs: true,
    themeRoot: ":root",
  },
}

Caso você utilize o nuxt3 com vite, ele irá mudar um pouco a forma de instalação do plugin, em baixo vou deixar a documentação para instalação:

Documentação: https://daisyui.com/docs/install/nuxt/

Fiz um exemplos pratico do nuxt3 e daisyui, aqui está o link do meu repositório do github:

https://github.com/Helton-Carlos/nuxt-and-daisyui

Se quiser já ir testando, já pode colar em seu terminal:

git clone https://github.com/Helton-Carlos/nuxt-and-daisyui.git

npm i

npm run dev

Vue 3 e Naive UI

Helton Carlos Brito Silva — Tue, 19 Nov 2024 18:32:58 +0000

O Naive UI é uma biblioteca de componentes de interface de usuário (UI) para Vue.js, desenvolvida com foco em simplicidade, design limpo e flexibilidade. 💻💻

Ela segue o padrão de design "Material Design" e oferece uma vasta gama de componentes prontos para uso, como botões, tabelas, formulários, modais, entre outros, permitindo que os desenvolvedores criem aplicações com interfaces modernas e consistentes de forma rápida e fácil, hoje é uma das minhas bibliotecas favoritas para criação de layouts com Vue3.🚀💻✨

1º Etapa

Entre no seu projeto e instale a biblioteca.

npm i -D naive-ui

Verifique se instalou package.json:

{
  "devDependencies": {
    "naive-ui": "^2.40.1",
  }
}

A versão atual é 2.40.1, pode ser que em algum momento altere, mas acredito que será a mesma forma de instalação.

2º Etapa

Hora de usar essa linda biblioteca de componentes!

<script setup lang="ts">
  import { NButton } from 'naive-ui'
</script>

<template>
  <n-button>naive-ui</n-button>
</template>

Para usar de forma global faça isso:

Adicione também no arquivo main.js ou main.ts

import { createApp } from 'vue'
import App from './App.vue'
import naive from "naive-ui";

createApp(App).use(naive).mount('#app');

Agora você só precisar fazer isso para usar o button:

<template>
  <n-button>naive-ui</n-button>
</template>

Link da documentação:
https://www.naiveui.com/en-US/os-theme

Link de um projeto meu que usa o naive-ui:
https://github.com/Helton-Carlos/stance-erp

Quero agradecer a todos que chegaram ate aqui!

linkedin:
https://www.linkedin.com/in/helton-brito-856ba516b/

Nuxt 3 e PWA

Helton Carlos Brito Silva — Fri, 08 Mar 2024 19:15:09 +0000

Sabemos que existem muitas maneiras de desenvolver aplicativos. Hoje, vamos falar sobre PWA, uma abordagem muito interessante tanto em termos de tecnologia quanto em custo-benefício.

Vamos agitar as coisas neste exemplo usando o framework front-end Nuxt 3 com PWA! 🚀

1º Etapa - Instalação.

Entre no seu projeto feito em nuxt3 e instale o PWA Vite Plugin em seu projeto.

npm i @vite-pwa/nuxt -D

Adicione no nuxt.config.ts configure-o:

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: [
    '@vite-pwa/nuxt'
  ],
  pwa: {
    /* PWA options */
  }
})

2º Etapa - Configurar manifest.

É hora de configurar seu projeto para PWA! Vou explicar detalhadamente cada parte que precisa ser configurada no seu projeto.

vamos começar com o manifest ele define critérios como resiliência, responsividade, conectividade e facilidade de instalação, permitindo que os desenvolvedores criem aplicativos que se comportem de forma semelhante a aplicativos nativos.

Dentro da pasta public crie uma pasta chamada manifest e adicione sua logo do projeto, as imagens devem conter o tamanho descrito dentro do sizes.

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: [
    '@vite-pwa/nuxt'
  ],
  pwa: {
   manifest: {
      name: 'nome do seu APP',
      short_name: 'nome simplificado do APP',
      theme_color: '#ffffff',
      start_url:'/',
      lang: 'pt-br',
      description: 'descrição do seu APP',
      screenshots: [
        {
          src: "manifest/home-screen.png",
          sizes: "320x320",
          type: "image/png",
          form_factor: "wide",
          label: "nome simplificado do APP"
        }
      ],
      icons: [
        {
          src: 'manifest/android-chrome-192x192.png',
          sizes: '192x192',
          type: 'image/png',
        },
        {
          src: 'manifest/android-chrome-512x512.png',
          sizes: '512x512',
          type: 'image/png',
        },
        {
          src: 'manifest/android-chrome-512x512.png',
          sizes: '512x512',
          type: 'image/png',
        },
      ],
    },
  }
})

Uma dica super legal é usar o site: https://realfavicongenerator.net/
Ele facilita todo o processo de configurar as medidas necessárias para suas imagens, tudo a partir do logo principal do seu projeto.

3º Etapa - Configuração de strategies.

Na configuração de um PWA com o Workbox, existem duas estratégias principais que podem ser usadas para gerenciar o Service Worker:

generateSW: Esta estratégia é usada para gerar automaticamente um arquivo de Service Worker a partir de uma configuração simples. Ela é mais fácil de configurar, mas pode não oferecer o mesmo nível de controle que a estratégia injectManifest.

injectManifest: Esta estratégia permite injetar manualmente uma lista de arquivos para serem precacheados pelo Service Worker. Ela oferece um controle mais granular sobre quais arquivos são armazenados em cache, permitindo uma maior otimização do desempenho e uma experiência offline mais personalizada.

Neste exemplo iremos configurar na "mão" nossa estrategia para service workers, então usaremos o injectManifest.

Esta configuração indica que o método de injeção do manifest deve ser usado para gerar o service worker. O método de injeção do manifest permite que você adicione manualmente arquivos ao cache, dando mais controle sobre quais recursos são armazenados em cache. No exemplo dado, globPatterns define os padrões de arquivos que devem ser incluídos no cache. O padrão '*/.{js,css,html,png,svg,ico}' significa que o Workbox deve considerar todos os arquivos com extensões .js, .css, .html, .png, .svg e .ico para o cache.

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: [
    '@vite-pwa/nuxt'
  ],
  pwa: {
   strategies:'injectManifest',
   srcDir: 'service-worker',
   filename: 'sw.ts',
   registerType: 'autoUpdate',
   manifest: {
      name: 'nome do seu APP',
      short_name: 'nome simplificado do APP',
      theme_color: '#ffffff',
      start_url:'/',
      lang: 'pt-br',
      description: 'descrição do seu APP',
      screenshots: [
        {
          src: "manifest/home-screen.png",
          sizes: "320x320",
          type: "image/png",
          form_factor: "wide",
          label: "nome simplificado do APP"
        }
      ],
      icons: [
        {
          src: 'manifest/android-chrome-192x192.png',
          sizes: '192x192',
          type: 'image/png',
        },
        {
          src: 'manifest/android-chrome-512x512.png',
          sizes: '512x512',
          type: 'image/png',
        },
        {
          src: 'manifest/android-chrome-512x512.png',
          sizes: '512x512',
          type: 'image/png',
        },
      ],
    },
    workbox: {
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
    },
    injectManifest: {
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
    },
  }
})

Criaremos a pasta chamada: service-worker com o arquivo: sw.ts

Dentro do arquivo sw.ts, iremos chamar o workbox é uma biblioteca JavaScript criada pelo google que simplifica o desenvolvimento de PWAs que utilizam Service Workers.

Basicamente esse código precacheAndRoute do Workbox serve para precachear e rotear os recursos listados em self.__WB_MANIFEST, que é uma lista gerada automaticamente pelo Workbox durante a compilação.

Colocaremos esse código:

/// <reference lib="WebWorker" />
/// <reference types="vite/client" />

import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
import { clientsClaim } from 'workbox-core'
import { NavigationRoute, registerRoute } from 'workbox-routing'

declare let self: ServiceWorkerGlobalScope

precacheAndRoute(self.__WB_MANIFEST);

cleanupOutdatedCaches();

let allowlist: undefined | RegExp[]

if (import.meta.env.DEV)
  allowlist = [/^\/$/]

registerRoute(new NavigationRoute(
  createHandlerBoundToURL('/'),
  { allowlist },
))

self.skipWaiting();
clientsClaim();

Observação: Como estamos usando typeScript para escrever seu service worker personalizado. Para resolver os tipos de service workers, basta adicionar WebWorkera no seu tsconfig.json arquivo:

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM", "WebWorker"]
  }
}

4º Etapa - Configurar client e devOptions.

Configurar client: Esse trecho de código está relacionado à configuração de um cliente, indica que o aplicativo deve exibir o prompt de instalação quando for detectado que ele pode ser instalado no dispositivo do usuário.

Configurar devOptions: Habilita as opções de desenvolvimento. Define a rota de fallback para a navegação. Isso significa que se o servidor não encontrar um recurso específico, ele retornará o arquivo especificado, neste caso, a rota raiz.

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: [
    '@vite-pwa/nuxt'
  ],
  pwa: {
   strategies:'injectManifest',
   srcDir: 'service-worker',
   filename: 'sw.ts',
   registerType: 'autoUpdate',
   manifest: {
      name: 'nome do seu APP',
      short_name: 'nome simplificado do APP',
      theme_color: '#ffffff',
      start_url:'/',
      lang: 'pt-br',
      description: 'descrição do seu APP',
      screenshots: [
        {
          src: "manifest/home-screen.png",
          sizes: "320x320",
          type: "image/png",
          form_factor: "wide",
          label: "nome simplificado do APP"
        }
      ],
      icons: [
        {
          src: 'manifest/android-chrome-192x192.png',
          sizes: '192x192',
          type: 'image/png',
        },
        {
          src: 'manifest/android-chrome-512x512.png',
          sizes: '512x512',
          type: 'image/png',
        },
        {
          src: 'manifest/android-chrome-512x512.png',
          sizes: '512x512',
          type: 'image/png',
        },
      ],
    },
    workbox: {
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
    },
    injectManifest: {
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
    },
    client: {
      installPrompt: true,
      periodicSyncForUpdates: 20,
    },
    devOptions: {
      enabled: true,
      suppressWarnings: true,
      navigateFallback: '/',
      navigateFallbackAllowlist: [/^\/$/],
      type: 'module',
    },
  }
})

Quero agradecer a todos que chegaram ate aqui!
linkedin:
https://www.linkedin.com/in/helton-brito-856ba516b/

Vue 3 e Testes Unitários

Helton Carlos Brito Silva — Tue, 23 Jan 2024 19:20:04 +0000

Na busca pela construção de aplicativos super confiáveis, as empresas estão dando um show ao incentivar seus desenvolvedores front-end a arrasarem nos testes unitários! É a hora de brilhar, galera! 💻✨

Vamos agitar as coisas neste exemplo usando o framework front-end Vue.js 3, junto com a poderosa dupla Vitest e Vue Test Utils! 🚀 Preparados para a mágica acontecer?

1º Etapa

Entre no seu projeto e instale o vitest em seu projeto.

npm install -D vitest

Vá ate o arquivo package.json e adicione:

{
  "scripts": {
    "test": "vitest"
  }
}

Adicione também no arquivo vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'jsdom',
  },
})

2º Etapa

Hora de instalar Vue Test Utils, a biblioteca oficial de utilitários de teste para Vue.js!

npm install @vue/test-utils --save-dev

Ao finalizar a instalação, use este comando no terminal:

npm install jsdom

3º Etapa

É hora de mergulhar de cabeça no código! Vamos agitar as linhas e criar um componente para testar nossa aplicação como verdadeiros mestres da programação! 💻✨ Nesse exemplo incrível, estou prestes a mandar ver dentro do nosso querido componente App.vue, só para deixar todo mundo afiado nessa aula prática. Preparados para a jornada de aprendizado? 🚀

<script setup>
import { ref } from 'vue';

const count = ref(0)
</script>

<template>
  <div>
    <p data-test="text-value">
      value: {{ count }}
    </p>

    <button
      data-test="btn"
      type="button" 
      @click="count++"
    >
      increment
    </button>
  </div>
</template>

E depois crie esse arquivo, App.test.js adicione esse teste:

import { mount } from '@vue/test-utils'
import App from './App.vue'

describe("App component", () => {
  test("Render App", () => {
    const component = mount(App);

    expect(component).toBeDefined();
  });

  test("Search by text", () => {
    const wrapper = mount(App);

    expect(wrapper.text()).toContain("value: 0");
  })

  test("triggers a click", () => {
    const wrapper = mount(App);

    const btn = wrapper.findAll('[data-test="btn"]');

    expect(btn).toHaveLength(1);
  })
});

Vá ate o terminal e digite:

yarn test

Resultado final:

como podemos ver todos os testes estão aprovados!

Quero agradecer a todos que chegaram ate aqui!

linkedin:
https://www.linkedin.com/in/helton-brito-856ba516b/