Implementing a Basic Component to Pass Tests — TDD with React, Part 4

export default function Counter() {
  return (
    <div>
      {/* 아직은 아무 내용도 없는 빈 껍데기입니다 */}
    </div>
  );
}

TestingLibraryElementError: Unable to find an element with the text: /현재 숫자: 0/

export default function Counter() {
  return (
    <div>
      <p>현재 숫자: 0</p>
      <button type="button">+</button>
    </div>
  );
}

import { useState } from 'react';
 
export default function Counter() {
  // [상태] 숫자를 기억하는 메모리 상자(state)를 만듭니다. 초기값은 0입니다.
  const [count, setCount] = useState(0);
 
  const handleClick = () => {
    // [동작] 기존 값에 1을 더해줍니다.
    setCount(prev => prev + 1);
  };
 
  return (
    <div>
      {/* 고정된 숫자 0 대신, 변하는 값 count를 보여줍니다. */}
      <p>현재 숫자: {count}</p>
      
      {/* 버튼을 누르면 handleClick 함수가 실행됩니다. */}
      <button type="button" onClick={handleClick}>
        +
      </button>
    </div>
  );
}

npm test

Test results

 PASS  src/components/Counter.test.tsx
  Counter 컴포넌트 동작 테스트
    ✓ 초기값은 0이며, + 버튼을 누르면 숫자가 1 증가한다 (50 ms)

• Initial state
  useState(0) renders “현재 숫자: 0”, and getByText finds it.
• Button existence
  The <button>+<button> tag allows getByRole('button', { name: '+' }) to succeed.
• Click behavior
  When user.click() runs, the onClick event triggers setCount.
• Result verification
  The state changes to 1, the screen rerenders, and the text “현재 숫자: 1” (“Current number: 1”) is found.

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

• Minimal implementation
  Instead of trying to write perfect code immediately, we first added the elements the tests required: text and a button.
• State management
  We added
  useState
  only where a value needed to change, completing the dynamic behavior.
• Confidence
  Passing tests mean that the component fully meets its minimum requirements.

Next time, in

Part 5: Refactoring Components While Maintaining Tests

, we will explore cleaning up code with tests in place.

• React useState Hook↗
  The official React documentation explains the basics of the useState hook.
• Thinking in React↗
  An official guide to thinking in React and designing components.