writing-test-using-vitest

Write and run Vitest unit tests for TypeScript projects.

Updated Nov 1, 2021
One-click install
npx skills add https://github.com/elecdeer/dotfiles --skill writing-test-using-vitest
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: writing-test-using-vitest
Source: https://github.com/elecdeer/dotfiles/tree/main/dot_claude/skills/writing-test-using-vitest
Command: npx skills add https://github.com/elecdeer/dotfiles --skill writing-test-using-vitest

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vitest, react, jest, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating, managing, and maintaining tests for TypeScript projects, especially when working with complex unit tests and React components.

Core Features & Use Cases

  • Unit Testing: Facilitates writing and running unit tests with Given-When-Then patterns and Vitest testing library.
  • React Component Testing: Supports testing React components with browser mode for accurate user interaction simulations.
  • Mocking: Provides capabilities for mocking dependencies and functions for more accurate testing.
  • Snapshots: Offers snapshot testing to prevent unintended changes in the code.
  • Quick Start: Get started by writing a simple test using the provided example structure.

Quick Start

Run the skill to generate a new unit test file for a function 'calculateSum' in your TypeScript project.

Frequently Asked Questions about writing-test-using-vitest

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

FAQPage Schema
How do I write unit tests for TypeScript projects using Vitest?

To write unit tests for TypeScript projects using Vitest, you can apply the Given-When-Then pattern to structure test cases and execute them with the Vitest testing library for reliable validation.

Can I test React components with Vitest in browser mode?

Yes, you can test React components with Vitest using browser mode, which provides an accurate environment for simulating user interactions and validating component behavior.

How do I mock dependencies and functions in Vitest?

You can mock dependencies and functions in Vitest using its built-in mocking capabilities, allowing you to isolate modules and ensure accurate unit testing results without external side effects.

Does Vitest support snapshot testing for TypeScript components?

Yes, Vitest supports snapshot testing for TypeScript components, enabling you to capture expected outputs and prevent unintended changes in your codebase across test runs.

Do I need Jest to run unit tests with Vitest for React components?

Vitest handles unit testing natively, but the environment requires both Vitest and Jest dependencies alongside React to properly support browser mode and mocking for component testing.