组件重构与测试维护——用 React 开始 TDD，第 5 篇

npm i --save-dev @types/jest

// ... import 생략
 
describe('Counter 컴포넌트 동작 테스트', () => {
  test('...', async () => {
    const user = userEvent.setup();
    render(<Counter />);
 
    // [팁] 클릭하기 전 화면 상태 출력
    console.log('--- 클릭 전 ---');
    screen.debug(); 
 
    const incrementBtn = screen.getByRole('button', { name: '+' });
    await user.click(incrementBtn);
 
    // [팁] 클릭한 후 화면 상태 출력
    console.log('--- 클릭 후 ---');
    screen.debug(); 
 
    expect(screen.getByText('현재 숫자: 1')).toBeInTheDocument();
  });
});

// Props 타입을 정의하여 TypeScript의 장점을 살립니다.
interface Props {
  label: string;
  onClick: () => void;
}
 
export default function CountButton({ label, onClick }: Props) {
  return (
    <button type="button" onClick={onClick}>
      {label}
    </button>
  );
}

import { useState } from 'react';
import CountButton from './CountButton'; // [추가]
 
export default function Counter() {
  const [count, setCount] = useState(0);
 
  const handleClick = () => {
    setCount(prev => prev + 1);
  };
 
  return (
    <div>
      <p>현재 숫자: {count}</p>
      
      {/* [변경] 기존 button 태그 대신 컴포넌트 사용 */}
      <CountButton label="+" onClick={handleClick} />
    </div>
  );
}

npm test

 PASS  src/components/Counter.test.tsx

git clone https://github.com/PROMLEE/my-tdd-app.git
cd my-tdd-app
git checkout part5