Testing Custom Hooks — TDD with React, Part 7

📅

loading..🐩🐩🐩🐩

Before getting started 🔗

So far, our

Counter

component has used useState to count and display a warning under certain conditions.

Look at its code again: JSX for the screen and logic for the calculation are mixed together.

What if another page needs the same counting behavior?

Should we copy and paste it?

This is where a

custom hook

helps.

Today we will separate the brain, the hook, from the body, the component, and test that brain independently.

Step 1: Extracting the logic through refactoring 🔗

Create src/hooks and move the component's logic into useCounter.ts.

This is a

refactoring

step: We change the internal structure without changing the tests.

Creating a custom hook 🔗

src/hooks/useCounter.ts

import { useState } from 'react';
 
// [로직] 숫자를 관리하고 증가시키는 기능만 담당합니다.
export default function useCounter() {
  const [count, setCount] = useState(0);
 
  const increment = () => {
    setCount((prev) => prev + 1);
  };
 
  // 컴포넌트에서 필요한 값과 함수를 반환합니다.
  return {
    count,
    increment,
  };
}

Updating the component 🔗

Counter.tsx no longer performs calculations itself; it simply uses the new hook.

src/components/Counter.tsx

import CountButton from './CountButton';
import useCounter from '../hooks/useCounter'; // Hook import
 
export default function Counter() {
  // [수정] 직접 useState를 쓰지 않고 Hook을 사용합니다.
  const { count, increment } = useCounter();
 
  return (
    <div>
      <p>현재 숫자: {count}</p>
      {/* 함수 이름이 handleClick에서 increment로 바뀌었음에 주의하세요 */}
      <CountButton label="+" onClick={increment} />
 
      {count >= 3 && (
        <p style={{ color: 'red' }}>
          숫자가 너무 커요!
        </p>
      )}
    </div>
  );
}

Step 2: Testing the hook with renderHook and act 🔗

Now test whether the extracted useCounter works correctly.

A hook is not a component, so we cannot use render(<useCounter />).

We need renderHook and act.

renderHook
Creates a test component and runs the hook inside it.
act
Tells
React
that an important state-changing operation is about to happen, such as a simulated click.

Writing the test 🔗

Create src/hooks/useCounter.test.ts with the following code.

Again, use logs to track state changes.

src/hooks/useCounter.test.ts

import { renderHook, act } from '@testing-library/react';
import useCounter from './useCounter';
import { describe, test, expect } from 'vitest';
 
describe('useCounter Hook 동작 테스트', () => {
  
  test('초기값은 0이며, increment 함수를 호출하면 값이 1 증가한다', () => {
    // 1. Hook 렌더링 (가상 환경)
    const { result } = renderHook(() => useCounter());
 
    console.log(`[Step 1] 초기값 확인: ${result.current.count}`);
    
    // 초기값 검증
    expect(result.current.count).toBe(0);
 
    // 2. 상태 변경 (act 사용 필수!)
    console.log('[Step 2] increment 함수 실행');
    act(() => {
      result.current.increment();
    });
 
    console.log(`[Step 3] 변경된 값 확인: ${result.current.count}`);
 
    // 3. 결과 검증
    expect(result.current.count).toBe(1);
  });
});

Step 3: Running and analyzing the tests 🔗

Run the hook tests.

Terminal

npm test

Checking the execution log 🔗

Checking the execution log

[Step 1] 초기값 확인: 0
[Step 2] increment 함수 실행
[Step 3] 변경된 값 확인: 1
 
 PASS  src/hooks/useCounter.test.ts
 PASS  src/components/Counter.test.tsx

The logs show that calling increment inside act changes result.current.count from 0 to 1.

Notice that the existing Counter.test.tsx also still

passes

We changed the implementation from useState inside the component to a custom hook, but the screen and behavior seen by users remain unchanged, so the original tests keep working.

Conclusion 🔗

The source is available at GitHub — Promleeblog/react-tdd-setup↗.

Terminal

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

We learned to separate logic and test it independently.

renderHook
Runs and verifies a hook without writing a component around it.
act
Wrap state-changing actions in act so
React
detects and applies the updates.
Separation of concerns
The component focuses on presentation and the hook on calculations, making the code much cleaner.

Both the application's internal logic, the hook, and its external screen, the component, are now covered by tests.

Next, Part 8 covers
testing asynchronous logic
, a core part of real web applications.

References 🔗

Testing Custom Hooks↗
The official React Testing Library documentation for renderHook.
When to use act()↗
The React team's explanation of act and when it is needed.

Testing Custom Hooks — TDD with React, Part 7 | PromleeBlog