Vue Academy · Aula

Configuração do Vitest para projetos Vue

vitest.config.ts, ambiente jsdom, @vue/test-utils, cobertura com v8 e script de testes.

Configuração do Vitest para projetos Vue é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Por que usar Vitest com Vue?

Vitest é um executor de testes rápido criado sobre o Vite. Como os projetos Vue 3 já usam o Vite, o Vitest reutiliza a mesma configuração e as mesmas transformações — não é necessário um pipeline de compilação separado para os testes.

Ele oferece uma API semelhante à do Jest, com suporte nativo a ESM e TypeScript.

Instalando as ferramentas

Adicione o Vitest, os utilitários de teste do Vue e o jsdom (um DOM semelhante ao de um navegador para o Node).

// terminal
// npm install -D vitest @vue/test-utils jsdom @vitest/coverage-v8

O ambiente jsdom

Os componentes precisam de um DOM onde possam ser montados. O Node não tem DOM, então os testes são executados no jsdom, que simula as APIs do navegador. Defina-o como o ambiente de teste na configuração.

// vitest.config.ts
import { defineConfig } from "vitest/config"
import vue from "@vitejs/plugin-vue"

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

Ativando os globais

Por padrão, você importa describe, it e expect em cada arquivo. Definir globals: true os torna disponíveis em qualquer lugar sem importações, como no Jest.

// vitest.config.ts
export default defineConfig({
  test: {
    environment: "jsdom",
    globals: true,
  },
})

Tipos TypeScript para os globais

Ao usar globais com TypeScript, adicione os tipos do Vitest para que o editor reconheça describe e funções relacionadas.

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

Um primeiro arquivo de teste

O Vitest encontra arquivos que terminam em .test.ts ou .spec.ts. Com os globais ativados, você escreve os testes diretamente.

// math.test.ts
describe("add", () => {
  it("sums two numbers", () => {
    expect(1 + 2).toBe(3)
  })
})

Montando um componente

Com @vue/test-utils instalado e o jsdom configurado, você pode montar componentes reais em um teste e fazer asserções sobre a saída renderizada.

import { mount } from "@vue/test-utils"
import Hello from "./Hello.vue"

it("renders the greeting", () => {
  const wrapper = mount(Hello, { props: { name: "Ada" } })
  expect(wrapper.text()).toContain("Hello, Ada")
})

Adicionando cobertura

A cobertura mostra quais linhas seus testes executam. O Vitest é compatível com o provedor v8 (rápido e nativo). Configure-o em test.coverage.

// vitest.config.ts
export default defineConfig({
  test: {
    coverage: {
      provider: "v8",
      reporter: ["text", "html"],
    },
  },
})

O relatório HTML de cobertura

O gerador de relatórios html grava um relatório navegável (por padrão, em coverage/index.html). Abra-o para ver a cobertura de linhas e ramificações por arquivo, com as lacunas destacadas.

// after running coverage:
// open coverage/index.html in a browser
// red lines = not executed by any test

Comandos do package.json

Configure comandos convenientes. test executa o conjunto de testes; coverage executa com a opção de cobertura.

// package.json
{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "coverage": "vitest run --coverage"
  }
}

Modo de observação e modo de execução

O vitest simples permanece no modo de observação, executando novamente os testes afetados quando você salva — ótimo durante o desenvolvimento. Na integração contínua, você precisa de uma única execução que termine; por isso, use vitest run.

// local dev:  npm run test     (watch)
// CI pipeline: npm run test:run (one pass, exits)

Verificação rápida

Verifique sua compreensão da configuração do Vitest.

Recapitulação

Você configurou o Vitest para um projeto Vue:

Instale vitest, @vue/test-utils, jsdom e um provedor de cobertura.
Defina environment: "jsdom" para que os componentes tenham um DOM.
globals: true evita a importação dos auxiliares de teste; adicione vitest/globals aos tipos do tsconfig.
Configure a cobertura com o provedor v8 e um gerador de relatórios html.
Adicione os comandos test e coverage; use vitest run na integração contínua.

Perguntas Frequentes

A aula “Configuração do Vitest para projetos Vue” é grátis?

Sim — o texto completo de “Configuração do Vitest para projetos Vue” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Configuração do Vitest para projetos Vue”?

vitest.config.ts, ambiente jsdom, @vue/test-utils, cobertura com v8 e script de testes. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Configuração do Vitest para projetos Vue”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Configuração do Vitest para projetos Vue
Montagem e consulta de componentes
Testes de interações e eventos do usuário
Simulação de composables, stores e APIs

← Voltar para Vue Academy