Configurando Vitest com TypeScript e Escrevendo Testes Básicos

Vitest é um framework de teste moderno e eficiente, desenvolvido como uma alternativa ao Jest, com foco em velocidade e eficiência para projetos usando Vite. Assim como o Jest, o Vitest também suporta TypeScript, oferecendo uma integração fluida e rápida. Aqui está um guia passo a passo sobre como configurar o Vitest para trabalhar com TypeScript e como escrever testes básicos.

Configurando Vitest com TypeScript

Instalando Dependências:
Para começar a usar Vitest, você precisa instalar algumas dependências. Primeiro, se você ainda não tem o Vite configurado em seu projeto, será necessário instalá-lo junto com o Vitest e o suporte a TypeScript.
bash
```
npm install vite vitest ts-node typescript --save-dev
```
- vite: O bundler base que o Vitest usa para execução de testes.
- vitest: O framework de teste.
- ts-node: Necessário para que o Vitest execute arquivos TypeScript diretamente.
- typescript: O compilador TypeScript.
Configurando o Vite para Testes:
No arquivo de configuração do Vite (vite.config.ts), você precisará adicionar a configuração para o Vitest. Isso geralmente envolve importar o plugin do Vitest e configurá-lo conforme necessário.
typescript
```
import { defineConfig } from "vite";
import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
import vue from "@vitejs/plugin-vue";
import { visualizer } from "rollup-plugin-visualizer";
import { resolve } from "path";

export default defineConfig({
  plugins: [vue(), viteCommonjs(), visualizer()],
  resolve: {
    alias: {
      "@/": `${resolve(__dirname, "src")}/`,
    },
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./tests/setup.ts"],
    include: ["**/*.{test,spec}.{ts,tsx}"],
  },
});
```
As configurações importantes aqui incluem:
- globals: Habilita o uso de globais como describe e it sem precisar importá-los.
- environment: Define o ambiente de teste, que pode ser node ou jsdom, dependendo do tipo de testes que você está executando.
- setupFiles: Arquivos para serem executados antes dos testes começarem, úteis para configurações globais.
- include: Padrões glob para identificar arquivos de teste.
Adicionando Scripts de Teste ao package.json:
No seu package.json, adicione um script para facilitar a execução dos testes.
json
```
"scripts": {
  "test": "vitest",
  "test:coverage": "vitest run --coverage"
}
```

Escrevendo Testes Básicos com Vitest

Criando um Arquivo de Teste:
Suponha que você tenha uma função simples em TypeScript que deseja testar, localizada em src/sum.ts.
typescript
```
// src/sum.ts
export function sum(a: number, b: number): number {
  return a + b;
}
```

Escrevendo o Teste:

Em seu diretório de testes, crie um arquivo como sum.test.ts.

typescript

// tests/sum.test.ts
import { describe, it, expect } from "vitest";
import { sum } from "../src/sum";

describe("sum function", () => {
  it("adds 1 + 2 to equal 3", () => {
    expect(sum(1, 2)).toEqual(3);
  });
});

Aqui, usamos describe e it para organizar o teste.
expect é usado para fazer a asserção que verifica se o resultado da função sum é como esperado.

Executando os Testes:
Para rodar seus testes, você pode usar o comando que adicionou ao package.json.
bash
```
npm test
```
Isso iniciará o Vitest e executará os testes definidos, mostrando os resultados no terminal.

Benefícios do Vit

est

Velocidade: Vitest é notoriamente rápido, aproveitando a arquitetura moderna do Vite.
Flexibilidade: Suporta uma variedade de ambientes de teste e possui uma configuração altamente personalizável.
Comunidade: Embora mais novo que o Jest, o Vitest está ganhando uma comunidade ativa e crescente.

Utilizar Vitest com TypeScript oferece uma solução de teste moderna e eficiente, ideal para projetos que já usam Vite como seu bundler, proporcionando um desenvolvimento ágil e uma experiência de teste agradável.

Configurando Vitest com TypeScript e Escrevendo Testes Básicos ​