vitest-playwright-msw

Writes unit, integration, and E2E tests using Vitest, Playwright, and MSW.

Updated Mar 31, 2026
One-click install
npx skills add https://github.com/gengirish/dropflow --skill vitest-playwright-msw-gengirish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vitest-playwright-msw
Source: https://github.com/gengirish/dropflow/tree/main/.cursor/skills/vitest-playwright-msw
Command: npx skills add https://github.com/gengirish/dropflow --skill vitest-playwright-msw-gengirish

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vitest, @playwright/test, msw.

What problem does it solve? Testing a TypeScript monorepo requires coordinating multiple tools across layers: unit tests for financial logic, API mocking for external services, and end-to-end browser flows. This Skill provides a consistent testing strategy with ready-to-use patterns so tests are written correctly the first time. ## Core Features & Use Cases - Layered Test Strategy: Maps each package to the right tool — Vitest for GST calculation and Zod schemas, Vitest + MSW for API routes, Playwright for E2E order flows. - API Mocking with MSW: Provides server setup patterns to mock Razorpay, Shiprocket, and other external APIs during tests. - Coverage Enforcement: Includes Vitest configuration with 100% coverage thresholds for financial logic. - Use Case: When adding a new GST calculation feature, use this Skill to generate integer-arithmetic unit tests covering intra-state, inter-state, and export scenarios, then mock payment gateway responses for the API route tests. ## Quick Start Write Vitest unit tests for the GST calculation module covering intra-state, inter-state, and export cases, and set up MSW handlers to mock the Razorpay orders API.

Frequently Asked Questions about vitest-playwright-msw

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I mock API requests in Vitest tests?▼

Use MSW's setupServer with http handlers to intercept requests to external APIs like Razorpay or Shiprocket. Call server.listen() in beforeAll, server.resetHandlers() in afterEach, and server.close() in afterAll to isolate each test.

How to write Playwright E2E tests for an order flow?▼

Use @playwright/test to navigate pages, fill form fields with page.fill, click buttons, and assert visibility with expect(locator).toBeVisible(). Run tests against a real dev server seeded with test data.

Vitest vs Playwright: which tool for which test layer?▼

Vitest handles unit and integration tests for packages, API routes, and worker logic, while Playwright handles end-to-end browser flows like order creation through delivery. MSW complements Vitest by mocking external HTTP APIs.

How do I enforce 100% test coverage in Vitest?▼

Configure the coverage section in vitest.config.ts with provider v8 and thresholds setting lines, functions, and branches to 100. Run tests with the --coverage flag to verify the thresholds are met.

Why should financial calculations avoid floating-point in tests?▼

Floating-point arithmetic causes rounding drift in monetary values. Use integer arithmetic in paise and assert Number.isInteger on results, verifying that component taxes sum exactly to the total tax amount.