skills.rest
TencentBlueKing
TencentBlueKingOFFICIAL
Explore all skills by this author →
WebsiteGitHub

chat-x-unit-test

Writes Vitest unit tests for Vue 3 components with mocking patterns.

840|261|Updated Apr 18, 2019
Search Tags:#Vitest#Frontend#Mocking#typeScript#vue 3#Unit testing#test utils
One-click install
npx skills add https://github.com/TencentBlueKing/bk-bcs --skill chat-x-unit-test
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chat-x-unit-test
Source: https://github.com/TencentBlueKing/bk-bcs/tree/main/bcs-services/bcs-project-manager/.cursor/skills/chat-x-unit-test
Command: npx skills add https://github.com/TencentBlueKing/bk-bcs --skill chat-x-unit-test

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vitest, @vue/test-utils, and includes references (resource) components.

What problem does it solve?

Writing unit tests for Vue 3 components requires consistent conventions for file naming, mocking, mounting, and cleanup. This Skill provides a standardized guide so developers produce uniform, maintainable test suites for the chat-x frontend without reinventing test structure each time.

Core Features & Use Cases

  • Standardized Test Templates: Provides a base Vitest + @vue/test-utils template with beforeEach/afterEach lifecycle handling and mock setup.
  • Test Categorization: Covers rendering, props, events, and slot testing patterns for Vue components.
  • Reference Resources: Includes mock patterns, test Q&A, and test strategy documents loaded on demand.
  • Use Case: When adding a new Vue component to the chat-x project, ask the assistant to generate a co-located ComponentName.spec.ts file following the project conventions, then run it with pnpm --filter @blueking/chat-x test.

Quick Start

Ask the assistant to write unit tests for a specific Vue component in the chat-x project following the skill's testing conventions.

Frequently Asked Questions about chat-x-unit-test

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

FAQPage Schema
How do I write unit tests for Vue 3 components with Vitest?▼

Use @vue/test-utils to mount the component and Vitest for assertions and mocking. Create a spec file named ComponentName.spec.ts next to the component, mount it in a test, and assert on rendered output, props, and emitted events.

How to mock dependencies like vue-tippy in Vue component tests?▼

Use vi.mock at the top of the spec file to replace the module with a stub implementation. This isolates the component under test from external directive or plugin behavior during mounting.

How do I run tests for a single Vue component directory?▼

Run npx vitest run followed by the component directory path, such as src/components/your-component. To run the full chat-x suite, use pnpm --filter @blueking/chat-x test.

What types of tests should a Vue component spec cover?▼

Cover four categories: rendering tests verifying the component mounts correctly, props tests checking attribute passing, event tests validating emitted events, and slot tests confirming slot content renders as expected.

When should I update existing Vue component tests?▼

Update tests whenever you modify the component code. The skill enforces a synchronization principle: any change to component logic, props, or events must be reflected in the corresponding spec file to keep coverage accurate.

Related Skills

Explore More Software Engineering Skills→
aziontechaziontech
2

component-scaffold

Convert approved component specs into Vue scaffolds with package wiring.

Official
Advanced
ValyntValynt

run-tests

Automate test execution, coverage reporting, and CI validation with Vitest and Playwright.

Official
Advanced
Open-PawsOpen-Paws
3

code-review

Automate layered code review for pull requests in CI pipelines.

Official
Advanced
heaptracetechnologyheaptracetechnology
13

e2e-test

Automate end-to-end browser tests for multi-step user journeys with Playwright or Cypress.

Community
Advanced