TWD로 shadcn/ui 컴포넌트 테스트

Source: Dev.to

Introduction

저는 Testing Library 위에 구축된 shadcn/ui 컴포넌트를 TWD로 테스트하는 방법을 보여주는 작은 문서 사이트를 만들었습니다.

이미 Testing Library를 사용하고 있다면, 동일한 쿼리와 어설션을 유지하면서 UI를 구축하는 동안 실제 애플리케이션 안에서 직접 테스트를 실행하는 Testing While Developing의 이점을 얻을 수 있습니다.

이 접근 방식은 다음에 도움이 됩니다:

• 실제 화면에서 실제 shadcn 컴포넌트를 검증
• 수동 UI 검사를 반복 가능한 테스트로 전환
• 테스트를 실제 사용자 상호작용에 가깝게 유지
• Testing Library에 대한 지식과 패턴 재사용

문서와 예시는 여기에서 확인할 수 있습니다:

목표는 기존 테스트 도구를 대체하는 것이 아니라 일상적인 개발 워크플로우에 UI 테스트를 통합하는 것입니다.

Example: testing a Collapsible component

간단한 shadcn/ui Collapsible 컴포넌트가 있다고 가정해 보겠습니다:

import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

export function CollapsibleDemo() {
  return (
    
      
        Toggle content
      
      
        
          Here is some hidden content
        
      
    
  );
}

TWD를 사용하면 테스트는 실제 사용자 행동에 초점을 맞추고 익숙한 Testing Library‑스타일 쿼리를 사용합니다:

import { twd, screenDom, userEvent } from 'twd-js';
import { describe, it, expect } from 'twd-js/runner';

describe('Collapsible Component', () => {
  it('toggles content visibility on trigger click', async () => {
    await twd.visit('/collapsible');

    const toggleButton = await screenDom.findByRole('button', { name: 'Toggle content' });
    twd.should(toggleButton, 'be.visible');

    // Initially collapsed (content not in DOM)
    let content = screenDom.queryByText('Here is some hidden content');
    expect(content).eql(null);

    // Open
    await userEvent.click(toggleButton);
    const opened = await screenDom.findByText('Here is some hidden content');
    twd.should(opened, 'be.visible');

    // Close
    await userEvent.click(toggleButton);
    const closed = screenDom.queryByText('Here is some hidden content');
    expect(closed).eql(null);
  });
});

테스트는 실제 애플리케이션 내부에서 실행되어 사용자가 상호작용하는 방식 그대로 컴포넌트를 검증합니다.