omgkit 2.1.1 → 2.3.0

package/plugin/skills/testing/vitest/SKILL.md

@@ -1,64 +1,149 @@
 ---
-name: vitest
-description: Vitest testing. Use for JavaScript/TypeScript unit tests.
+name: Testing with Vitest
+description: Claude writes fast, reliable tests using Vitest for TypeScript/JavaScript projects. Use when writing unit tests, component tests, setting up mocks, snapshot testing, or configuring test coverage.
 ---
 
-# Vitest Skill
+# Testing with Vitest
 
-## Basic Tests
-```typescript
-import { describe, it, expect } from 'vitest';
+## Quick Start
 
-describe('add', () => {
-  it('adds two numbers', () => {
-    expect(add(1, 2)).toBe(3);
-  });
+```typescript
+// vitest.config.ts
+import { defineConfig } from "vitest/config";
 
-  it('handles negative numbers', () => {
-    expect(add(-1, 1)).toBe(0);
-  });
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: ["./tests/setup.ts"],
+    coverage: {
+      provider: "v8",
+      reporter: ["text", "html"],
+      thresholds: { global: { branches: 80, functions: 80, lines: 80 } },
+    },
+  },
 });
+
+// tests/setup.ts
+import { afterEach, vi } from "vitest";
+import { cleanup } from "@testing-library/vue";
+import "@testing-library/jest-dom/vitest";
+
+afterEach(() => { vi.clearAllMocks(); cleanup(); });
 ```
 
-## Async Tests
+## Features
+
+| Feature | Description | Reference |
+|---------|-------------|-----------|
+| Unit Testing | Fast isolated tests with describe/it/expect | [Vitest API](https://vitest.dev/api/) |
+| Mocking | Module, function, and timer mocking with vi | [Mocking Guide](https://vitest.dev/guide/mocking.html) |
+| Snapshot Testing | Component and data structure snapshots | [Snapshot Testing](https://vitest.dev/guide/snapshot.html) |
+| Component Testing | Vue/React component testing with Testing Library | [Vue Test Utils](https://test-utils.vuejs.org/) |
+| Coverage Reports | V8/Istanbul coverage with thresholds | [Coverage](https://vitest.dev/guide/coverage.html) |
+| Parallel Execution | Multi-threaded test runner | [Test Runner](https://vitest.dev/guide/features.html) |
+
+## Common Patterns
+
+### Unit Testing with Parametrization
+
 ```typescript
-it('fetches user', async () => {
-  const user = await fetchUser('123');
-  expect(user.email).toBe('test@example.com');
+import { describe, it, expect, test } from "vitest";
+
+describe("String Utils", () => {
+  test.each([
+    ["hello", 3, "hel..."],
+    ["hi", 10, "hi"],
+    ["test", 4, "test"],
+  ])('truncate("%s", %d) returns "%s"', (str, len, expected) => {
+    expect(truncate(str, len)).toBe(expected);
+  });
 });
 ```
 
-## Mocking
+### Mocking Modules and Services
+
 ```typescript
-import { vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach, Mock } from "vitest";
+import { UserService } from "@/services/user";
+import { apiClient } from "@/lib/api";
 
-vi.mock('./api', () => ({
-  fetchData: vi.fn().mockResolvedValue({ data: 'test' }),
+vi.mock("@/lib/api", () => ({
+  apiClient: { get: vi.fn(), post: vi.fn() },
 }));
 
-it('calls API', async () => {
-  const result = await getData();
-  expect(fetchData).toHaveBeenCalled();
+describe("UserService", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("fetches user from API", async () => {
+    const mockUser = { id: "1", name: "John" };
+    (apiClient.get as Mock).mockResolvedValue({ data: mockUser });
+
+    const user = await new UserService().getUser("1");
+
+    expect(apiClient.get).toHaveBeenCalledWith("/users/1");
+    expect(user).toEqual(mockUser);
+  });
 });
 ```
 
-## Setup
+### Vue Component Testing
+
 ```typescript
-// vitest.config.ts
-export default defineConfig({
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    coverage: {
-      provider: 'v8',
-    },
-  },
+import { describe, it, expect, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import Button from "@/components/Button.vue";
+
+describe("Button", () => {
+  it("emits click event", async () => {
+    const wrapper = mount(Button, { slots: { default: "Click" } });
+    await wrapper.trigger("click");
+    expect(wrapper.emitted("click")).toHaveLength(1);
+  });
+
+  it("is disabled when loading", () => {
+    const wrapper = mount(Button, { props: { loading: true } });
+    expect(wrapper.attributes("disabled")).toBeDefined();
+  });
 });
 ```
 
-## Run
-```bash
-vitest
-vitest --coverage
-vitest --ui
+### Testing Async Operations with Timers
+
+```typescript
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+describe("Debounce", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("delays function execution", () => {
+    const fn = vi.fn();
+    const debouncedFn = debounce(fn, 100);
+
+    debouncedFn();
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});
 ```
+
+## Best Practices
+
+| Do | Avoid |
+|----|-------|
+| Use descriptive test names explaining behavior | Testing implementation details |
+| Test behavior, not internal state | Sharing state between tests |
+| Use test.each for multiple similar cases | Using arbitrary timeouts |
+| Mock external dependencies | Over-mocking internal modules |
+| Keep tests focused and isolated | Duplicating test coverage |
+| Write tests alongside code | Ignoring flaky tests |
+
+## References
+
+- [Vitest Documentation](https://vitest.dev/)
+- [Vue Test Utils](https://test-utils.vuejs.org/)
+- [Testing Library](https://testing-library.com/)
+- [Vitest Coverage](https://vitest.dev/guide/coverage.html)