mcpField
V
vitest-skill

vitest-skill

github.com/lambdatest测试与质量384455 次安装2 周前更新
代码仓库

关于 vitest-skill

vitest-skill 面向使用 Vitest 编写测试的开发者，提供模拟、快照、React 组件和源码内测试的示例，并涵盖配置与常用命令。

主要功能

  1. 01使用 Vitest API 编写测试
  2. 02用 vi 模拟模块
  3. 03使用快照和内联快照
  4. 04测试 React 组件
  5. 05配置源码内测试与覆盖率

适用场景

  1. 01为 TypeScript 代码编写单元测试
  2. 02在测试中模拟数据库调用
  3. 03测试 React 组件和序列化结果
  4. 04以监听或覆盖率模式运行测试

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/lambdatest/agent-skills --skill vitest-skill

安装后在 Claude Code 中输入/vitest-skill确认已加载。

附带文件reference/advanced-patterns.mdreference/playbook.md

详细介绍

Vitest 测试技能

核心模式

基本测试
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();
  });
});
模拟（使用 vi 而非 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();
源码内测试
// 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); });
}
快照测试
it('serializes user', () => {
  expect(serializeUser(user)).toMatchSnapshot();
});

it('inline snapshot', () => {
  expect(serializeUser(user)).toMatchInlineSnapshot(`
    { "name": "Alice", "email": "[email protected]" }
  `);
});
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();
  });
});
反模式
不推荐推荐原因
jest.fn()vi.fn()Vitest 使用 vi
jest.mock()vi.mock()命名空间不同
没有类型安全TypeScript + strictVitest 以 TypeScript 为先

快速参考

任务命令
运行一次npx vitest run
监听模式npx vitest（默认）
UInpx vitest --ui
覆盖率npx vitest --coverage
指定文件npx vitest run src/math.test.ts
筛选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}'],
  },
});

深入模式 → reference/playbook.md

§章节内容
1生产环境配置配置、工作区、设置文件
2模拟模式vi.mock、间谍、计时器、fetch
3React Testing Library组件、钩子、提供者
4快照与内联快照文件、内联、序列化器
5表格驱动测试test.each、describe.each
6源码内测试与源码同置的测试
7API / 集成测试使用 fetch 进行服务端测试
8CI/CD 集成GitHub Actions、脚本
9调试快速参考10 个常见问题
10最佳实践检查清单13 项

评论

支持 Markdown