Pular para o conteúdo
Skillpedia
Testes48 mil · #4511

vitest-skill

Ajuda seu agente a criar testes para código JavaScript e TypeScript. Garante que o código funcione corretamente e sem erros.

O que ela faz

Esta ferramenta ajuda a criar testes automáticos para seu código JavaScript ou TypeScript. Ela usa o Vitest, que é rápido e compatível com ferramentas como o Jest.

Quando usar

  • ✓Quando você precisa escrever testes para seu código.
  • ✓Ao usar o Vitest, vi.mock ou vitest.config.
  • ✓Para testar componentes React ou simular funções.

Exemplo do que pedir para a IA

“Escreva um teste para a função `soma` que verifica se 2 + 2 é igual a 4.”

Quer saber mais? Abra as seções abaixo.

Como usar

O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.

Link da skill

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/vitest-skill/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/vitest-skill/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
Como funciona

A ferramenta gera código de teste usando a sintaxe do Vitest. Ela pode criar testes básicos, simular partes do seu código (mocking) ou até mesmo testar componentes.

Instalação

Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.

No terminal (Claude Code, Codex, Cursor), na pasta do projeto:

npx skills add sickn33/agentic-awesome-skills --skill vitest-skill

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/vitest-skill/SKILL.md -o SKILL.md
Conteúdo técnico (SKILL.md)

Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.

Habilidade de Teste com Vitest

Quando Usar

Use esta habilidade quando precisar gerar testes Vitest em JavaScript/TypeScript com a velocidade nativa do Vite. API compatível com Jest com suporte a ESM e HMR. Use quando o usuário mencionar "Vitest", "vi.mock", "vitest.config". Dispara em: "Vitest", "vi.mock", "vi.fn", "Vite test", "vitest config".

Padrões Principais

Teste Básico

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { Calculator } from './calculator';

describe('Calculator', () => {
  let calc: Calculator;
  beforeEach(() => { calc = new Calculator(); });

  it('adds two numbers', () => {
    expect(calc.add(2, 3)).toBe(5);
  });

  it('throws on divide by zero', () => {
    expect(() => calc.divide(10, 0)).toThrow();
  });
});

Mocking (vi em vez de jest)

import { vi } from 'vitest';

// Mock module
vi.mock('./database', () => ({
  getUser: vi.fn().mockResolvedValue({ name: 'Alice' }),
  saveUser: vi.fn().mockResolvedValue(true),
}));

// Mock function
const mockFn = vi.fn();
mockFn.mockReturnValue(42);
mockFn.mockResolvedValue({ data: 'test' });

// Spy
const spy = vi.spyOn(console, 'log').mockImplementation(() => {});
expect(spy).toHaveBeenCalledWith('message');
spy.mockRestore();

// Timers
vi.useFakeTimers();
vi.advanceTimersByTime(1000);
vi.runAllTimers();
vi.useRealTimers();

Testes In-Source

// src/math.ts — tests alongside code!
export function add(a: number, b: number) { return a + b; }
export function multiply(a: number, b: number) { return a * b; }

if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest;
  it('adds', () => { expect(add(2, 3)).toBe(5); });
  it('multiplies', () => { expect(multiply(3, 4)).toBe(12); });
}

Testes de Snapshot

it('serializes user', () => {
  expect(serializeUser(user)).toMatchSnapshot();
});

it('inline snapshot', () => {
  expect(serializeUser(user)).toMatchInlineSnapshot(`
    { "name": "Alice", "email": "alice@test.com" }
  `);
});

Teste de Componentes React

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import Button from './Button';

describe('Button', () => {
  it('renders with label', () => {
    render(<Button label="Click me" />);
    expect(screen.getByText('Click me')).toBeDefined();
  });
});

Anti-Padrões

Ruim Bom Porquê
jest.fn() vi.fn() Vitest usa vi
jest.mock() vi.mock() Namespace diferente
Sem segurança de tipo TypeScript + strict Vitest é TS-first

Referência Rápida

Tarefa Comando
Executar uma vez npx vitest run
Modo de observação npx vitest (padrão)
UI npx vitest --ui
Cobertura npx vitest --coverage
Arquivo específico npx vitest run src/math.test.ts
Filtrar npx vitest run -t "adds"

vitest.config.ts

import { defineConfig } from 'vitest/config';
export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    coverage: { provider: 'v8', reporter: ['text', 'html'] },
    include: ['src/**/*.{test,spec}.{js,ts,tsx}'],
    includeSource: ['src/**/*.{js,ts}'],
  },
});

Padrões Avançados → reference/playbook.md

§ Seção Linhas
1 Configuração de Produção Config, workspace, arquivo de setup
2 Padrões de Mocking vi.mock, spies, timers, fetch
3 React Testing Library Componentes, hooks, providers
4 Snapshot & Snapshots Inline Arquivo, inline, serializadores
5 Testes Orientados por Tabela test.each, describe.each
6 Testes In-Source Testes co-localizados na origem
7 Testes de API / Integração Testes de servidor com fetch
8 Integração CI/CD GitHub Actions, scripts
9 Referência Rápida de Debugging 10 problemas comuns
10 Checklist de Melhores Práticas 13 itens

Limitações

  • Use esta habilidade apenas quando a tarefa corresponder claramente à sua origem e ao contexto do projeto local.
  • Verifique comandos, código gerado, dependências, credenciais e comportamento de serviços externos antes de aplicar alterações.
  • Não trate exemplos como substitutos para testes específicos do ambiente, revisão de segurança ou aprovação do usuário para ações destrutivas ou custosas.
Perguntas frequentes

Qual a diferença entre Vitest e Jest?

Vitest é mais rápido e usa recursos modernos do JavaScript, sendo compatível com a maioria das funções do Jest.

O que é 'mocking'?

Mocking é criar versões falsas de partes do seu código para testar outras partes isoladamente.

O que é 'snapshot testing'?

É uma forma de testar a saída do seu código comparando-a com um 'snapshot' (uma gravação) anterior.

Detalhes

Descrição original do autor

Generates Vitest tests in JavaScript/TypeScript with Vite-native speed. Jest-compatible API with ESM support and HMR. Use when user mentions "Vitest", "vi.mock", "vitest.config". Triggers on: "Vitest", "vi.mock", "vi.fn", "Vite test", "vitest config".

repo: sickn33/agentic-awesome-skills

Popularidade

Estrelas no GitHub
48 mil
Posição no ranking
#4511
Licença
MIT
Atualizada em
15/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas