poko8nada/ogp-maker/app-testing

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

Core Skill. Minimal unit testing toolkit using Vitest for local web applications. Focuses on essential test coverage for critical functionality.

Install

npx vskill@latest install poko8nada/ogp-maker/app-testing

SKILL.md

Application Testing

  • Test business logic and critical functions only
  • When connecting to API, tests for both normal and abnormal cases
  • Skip UI components and trivial code
  • Place *.test.ts(x) adjacent to source files
  • Enable aliases using vite-tsconfig-paths

NOTE:

  • Since Vitest depends on Vite via dependencies, there's no need to install Vite directly.
  • You can also write configuration files in vitest.config.ts instead of vite.config.ts.
  • It can be said that Vitest itself is designed to be usable without requiring much awareness of Vite's presence.

Decision Tree: Choosing Your Test Approach

User task → What needs testing?
    ├─ Pure logic/utils → Unit test with Vitest (no browser needed)
    │
    ├─ Component rendering → Vitest + @testing-library/react (rarely needed)
    │
    └─ Full integration → Vitest + Playwright (rarely needed)

Vitest Unit Testing (Primary Approach)

Example: Minimal Essential Tests
typescript
// math.test.ts
import { describe, it, expect } from "vitest";
import { calculateTotal } from "./math";
describe("calculateTotal", () => {
  it("handles empty cart", () => {
    expect(calculateTotal([])).toBe(0);
  });
  it("applies discount correctly", () => {
    expect(calculateTotal([{ price: 100 }], 0.1)).toBe(90);
  });
  it("throws on negative prices", () => {
    expect(() => calculateTotal([{ price: -10 }])).toThrow();
  });
});
Component Testing(rarely needed)
typescript
// Button.test.tsx
import { describe, it, expect, vi } from 'vitest'
import { render, screen } from '@testing-library/react'
import { Button } from './Button'
describe('Button', () => {
  it('calls onClick when clicked', () => {
    const handleClick = vi.fn()
    render(<Button onClick={handleClick}>Click</Button>)
    screen.getByRole('button').click()
    expect(handleClick).toHaveBeenCalledOnce()
  })
  it('disables when loading', () => {
    render(<Button loading>Click</Button>)
    expect(screen.getByRole('button')).toBeDisabled()
  })
})

Running Tests

bash
# Run all tests
pnpm run test
 
# Watch mode during development
pnpm run test -- --watch
 
# Coverage report (optional)
pnpm run test -- --coverage

Integration Testing (When Necessary)

For critical user flows that must work end-to-end using Playwright:

typescript
// checkout.e2e.test.ts
import { test, expect } from "@playwright/test";
test("completes checkout flow", async ({ page }) => {
  await page.goto("http://localhost:5173");
  await page.getByRole("button", { name: "Add to Cart" }).click();
  await page.getByRole("link", { name: "Checkout" }).click();
  await expect(page.getByText("Order Complete")).toBeVisible();
});

Run integration tests:

bash
pnpm run test:e2e

Best Practices

  • Test behavior, not implementation - Don't test internal state
  • One assertion per concept - Keep tests focused
  • Descriptive test names - "it('shows error when email invalid')"
  • Avoid test interdependence - Each test should run independently
  • Mock external dependencies - APIs, timers, file system

What NOT to Test

  • Framework internals (React, Vue rendering logic)
  • Third-party libraries (assume they work)
  • CSS/styling details
  • Trivial code (simple getters, obvious mappings)

Security

  • Security scanPassed, 95 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

7-day trend score
0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/poko8nada/ogp-maker/app-testing/badge)](https://verified-skill.com/skills/poko8nada/ogp-maker/app-testing)

Something wrong with this skill or its page? Tell us.