skills.rest
kunai-consulting
kunai-consultingOFFICIAL
Explore all skills by this author →
WebsiteGitHub

write-tests

Create Vitest browser tests for Qwik components with axe-core accessibility checks.

Updated Aug 27, 2026
Search Tags:#vitest#testing#accessibility#e2e testing#component testing#qwik
One-click install
npx skills add https://github.com/kunai-consulting/qwik-design-system --skill write-tests-kunai-consulting
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: write-tests
Source: https://github.com/kunai-consulting/qwik-design-system/tree/main/.ruler/skills/testing
Command: npx skills add https://github.com/kunai-consulting/qwik-design-system --skill write-tests-kunai-consulting

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of creating robust browser tests for Qwik Design System (QDS) components, ensuring their functionality, state management, and accessibility.

Core Features & Use Cases

  • Component Testing: Write browser tests for new or updated QDS components using Vitest.
  • State Management Testing: Test component interactions with both signals and values using the ExternalState pattern.
  • Accessibility Audits: Integrate axe-core for automated accessibility checks.
  • Keyboard Navigation: Verify that components are navigable and usable via keyboard.
  • Use Case: When developing a new Modal component, use this Skill to write tests that cover opening, closing, focus management, and accessibility compliance.

Quick Start

Use the write-tests skill to create a new browser test file for the Checkbox component.

Frequently Asked Questions about write-tests

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

FAQPage Schema
How do I write component tests for Qwik Design System components?▼

To write component tests for Qwik Design System components, you can use Vitest to automate browser tests that verify component interactions, state management via the ExternalState pattern, and accessibility compliance with axe-core.

What's the best way to test signal and value-based state in Qwik components?▼

The best way to test signal and value-based state in Qwik components is by using the ExternalState pattern within Vitest browser tests to verify that component interactions correctly manage and update both signals and values.

Can I use axe-core for automated accessibility testing with Vitest?▼

Yes, you can use axe-core for automated accessibility testing with Vitest. This combination allows you to integrate accessibility audits directly into your component tests to verify ARIA attributes and compliance.

How do I verify keyboard navigation and ARIA attributes in Qwik Design System components?▼

You verify keyboard navigation and ARIA attributes in Qwik Design System components by running Vitest browser tests that focus on accessibility compliance, ensuring components are navigable via keyboard and meet ARIA standards.

Does Vitest support end-to-end testing for Qwik component focus management?▼

Vitest supports end-to-end testing for Qwik component focus management by automating browser tests that verify component interactions, such as opening and closing modals, alongside keyboard navigation and accessibility checks.

Related Skills

Explore More Software Engineering Skills→
dylantarredylantarre
38

compound-components

Build accessible React UI primitives with compound component patterns.

Community
Advanced
gaia-reactgaia-react
21

new-component

Scaffold React component structures with Vitest tests and Storybook stories.

Official
Intermediate
oakossoakoss
1

storybook

Create Storybook stories and interaction tests for React components.

Official
Intermediate
Svenja-devSvenja-dev
38

e2e-testing

Automate end-to-end browser testing for web applications with Playwright MCP.

Community
Intermediate