TWD + shadcn/ui Testing Guide

December 22, 2025 · View on GitHub

A comprehensive interactive guide demonstrating how to test shadcn/ui components using TWD (Testing While Developing).

🎯 What is This?

This repository showcases testing patterns for 22+ shadcn/ui components. Each component page displays:

  • Live Component Preview – Interactive demonstration
  • Component Code – Reusable implementation example
  • TWD Test Code – Complete test patterns with recommended selectors

Perfect for developers learning how to test shadcn/ui components effectively.

📦 Features

  • 21 Fully Documented Components with TWD tests
  • 2 WIP Placeholder Pages (Range Calendar, Data Table)

🚀 Getting Started

Prerequisites

  • Node.js 18+
  • npm or yarn

Installation

npm install

Development

npm run dev

Opens at http://localhost:5173 with TWD test sidebar enabled in dev mode.

Build

npm run build

Optimized production build ready for GitHub Pages or any static host.

📋 Component Coverage

✅ Fully Implemented (With TWD Tests)

  • Accordion
  • Alert Dialog
  • Breadcrumb
  • Button
  • Calendar
  • Checkbox
  • Collapsible
  • Command
  • Context Menu
  • Dialog
  • Drawer
  • Dropdown Menu
  • Pagination
  • Popover
  • Radio Group
  • Select
  • Slider
  • Sonner
  • Switch
  • Table (Basic)
  • Tabs
  • Tooltip

🚧 Work in Progress (WIP)

  • Range Calendar
  • Data Table (TanStack)

🧪 Testing Patterns

Key Testing Concepts

screenDom – Standard DOM queries

await screenDom.findByRole('button', { name: 'Click me' });

screenDomGlobal – Portal-rendered elements (dialogs, popovers, tooltips)

await screenDomGlobal.findByText('Tooltip content');

Assertions

twd.should(element, 'be.visible');
expect(element).eql(null);  // For non-existence

Selector Best Practices

  • Tables: Use role:'table', columnheader, text content for rows
  • Portals: Use screenDomGlobal for dialogs, drawers, popovers, tooltips
  • Forms: Use findByLabelText(), findByRole() for inputs
  • Navigation: Use link text and button names

📖 Resources

📝 License

MIT

Happy TWD Testing! 🎉