테스팅과 성능 최적화

npm install --save-dev @testing-library/react @testing-library/jest-dom jest ts-jest @types/jest

{
  "compilerOptions": {
    // ...
    "types": ["jest", "node"] // jest 타입 정의 추가
  },
  "include": ["src", "src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", "src/**/*.test.ts", "src/**/*.test.tsx"]
}

npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript jest-environment-jsdom @types/node

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    ['@babel/preset-react', { runtime: 'automatic' }],
    '@babel/preset-typescript',
  ],
};

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.cjs'],
  transform: { '^.+\\.[jt]sx?$': 'babel-jest' },
};

require('@testing-library/jest-dom');

npx tsc --noEmit -p tsconfig.app.json
npx jest --config jest.config.cjs src/components/Greeting.test.tsx --runInBand

import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

// src/components/Greeting.test.tsx (테스트 파일)
import React from 'react';
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

describe('Greeting Component', () => {
  // 테스트 케이스 1: 이름이 올바르게 렌더링되는지 확인
  test('renders "Hello, World!" when name is "World"', () => {
    // 컴포넌트를 렌더링합니다.
    render(<Greeting name="World" />);

    // 화면에서 "Hello, World!" 텍스트를 찾습니다.
    const greetingElement = screen.getByText(/Hello, World!/i);

    // 해당 요소가 문서에 있는지 확인합니다.
    expect(greetingElement).toBeInTheDocument();
  });

  // 테스트 케이스 2: 다른 이름으로 렌더링되는지 확인
  test('renders "Hello, Alice!" when name is "Alice"', () => {
    render(<Greeting name="Alice" />);
    const greetingElement = screen.getByText(/Hello, Alice!/i);
    expect(greetingElement).toBeInTheDocument();
  });

  // 테스트 케이스 3: Props 타입 검증 (런타임에 직접 타입 에러를 발생시키지는 않지만,
  // TypeScript는 개발 단계에서 잘못된 Props 전달을 막아줍니다.)
  test('should not allow invalid name type (checked by TypeScript)', () => {
    // TypeScript는 아래와 같은 코드에서 컴파일 에러를 발생시킵니다.
    // render(<Greeting name={123} />); // Error: Type 'number' is not assignable to type 'string'.
    // 따라서 이런 런타임 테스트는 불필요하며, 타입스크립트의 역할에 맡깁니다.
    const validRender = () => render(<Greeting name="ValidName" />);
    expect(validRender).not.toThrow();
  });
});

import React, { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
}

const UserFetcher: React.FC = () => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        const response = await fetch('/api/user/1'); // 가상 API 엔드포인트
        if (!response.ok) {
          throw new Error('Failed to fetch user');
        }
        const userData: User = await response.json();
        setUser(userData);
      } catch (err: any) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    fetchUser();
  }, []);

  if (loading) return <div>Loading user...</div>;
  if (error) return <div style={{ color: 'red' }}>Error: {error}</div>;
  if (!user) return <div>No user data.</div>;

  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name} (ID: {user.id})</p>
    </div>
  );
};

export default UserFetcher;

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import UserFetcher from './UserFetcher';

// fetch API를 Mocking
const mockUser = { id: 1, name: 'Test User' };

beforeAll(() => {
  // Jest의 global.fetch를 Mocking
  jest.spyOn(global, 'fetch').mockImplementation(() =>
    Promise.resolve({
      ok: true,
      json: () => Promise.resolve(mockUser),
    } as Response) // Response 타입 단언
  );
});

afterEach(() => {
  // 각 테스트 후 Mock 초기화
  jest.clearAllMocks();
});

afterAll(() => {
  // 모든 테스트 후 Mock 복원
  jest.restoreAllMocks();
});

describe('UserFetcher Component', () => {
  test('fetches and displays user data', async () => {
    render(<UserFetcher />);

    // 로딩 상태 확인
    expect(screen.getByText(/Loading user.../i)).toBeInTheDocument();

    // 데이터 로딩 완료를 기다립니다.
    await waitFor(() => {
      expect(screen.getByText(/Name: Test User \(ID: 1\)/i)).toBeInTheDocument();
    });

    // 로딩 메시지가 사라졌는지 확인
    expect(screen.queryByText(/Loading user.../i)).not.toBeInTheDocument();
  });

  test('displays error message on fetch failure', async () => {
    // 에러 상황 Mocking
    jest.spyOn(global, 'fetch').mockImplementationOnce(() =>
      Promise.resolve({
        ok: false,
        status: 500,
        statusText: 'Internal Server Error',
      } as Response)
    );

    render(<UserFetcher />);

    await waitFor(() => {
      expect(screen.getByText(/Error: Failed to fetch user/i)).toBeInTheDocument();
    });
  });
});

function isUser(value: unknown): value is User {
  if (typeof value !== 'object' || value === null || Array.isArray(value)) return false;
  const row = value as Record<string, unknown>;
  return typeof row.id === 'number' && Number.isFinite(row.id) && typeof row.name === 'string';
}

const userData: unknown = await response.json();
if (!isUser(userData)) throw new Error('Invalid user response');
setUser(userData);

import React from 'react';

interface DisplayProps {
  value: string;
  count: number;
}

// React.memo로 동일 Props에 의한 렌더 생략을 시도
const MemoizedDisplay: React.FC<DisplayProps> = React.memo(({ value, count }) => {
  console.log('MemoizedDisplay rendered'); // 실제 렌더 시 출력됩니다.
  return (
    <div>
      <p>Value: {value}</p>
      <p>Count: {count}</p>
    </div>
  );
});

export default MemoizedDisplay;

import React, { useState } from 'react';
import MemoizedDisplay from './components/MemoizedDisplay';

const App: React.FC = () => {
  const [parentCount, setParentCount] = useState(0);
  const [text, setText] = useState('Initial Text');

  return (
    <div>
      <h1>Performance Optimization Example</h1>
      <button onClick={() => setParentCount(prev => prev + 1)}>
        Increment Parent Count: {parentCount}
      </button>
      <button onClick={() => setText('Updated Text ' + Math.random())}>
        Update Text
      </button>

      {/* count Prop은 계속 변하지만, value Prop은 Text가 변경될 때만 변경됩니다. */}
      {/* count도 Prop이므로 parentCount가 바뀌면 다시 렌더됩니다. */}
      <MemoizedDisplay value={text} count={parentCount} />
    </div>
  );
};

import React from 'react';

interface ChildProps {
  onIncrement: () => void;
  value: number;
}

const ChildComponent: React.FC<ChildProps> = React.memo(({ onIncrement, value }) => {
  console.log('ChildComponent rendered');
  return (
    <div>
      <p>Child Value: {value}</p>
      <button onClick={onIncrement}>Increment from Child</button>
    </div>
  );
});

export default ChildComponent;

import React, { useState, useCallback } from 'react';
import ChildComponent from './components/ChildComponent';

const App: React.FC = () => {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(0);

  // 함수형 state 갱신을 사용해 count를 의존성에서 제외합니다.
  const handleIncrement = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // 의존성이 같으면 저장한 함수 참조를 재사용하는 최적화

  // otherState가 변경될 때마다 App 컴포넌트가 리렌더링되지만,
  // handleIncrement는 재생성되지 않으므로 ChildComponent는 불필요하게 리렌더링되지 않습니다.
  return (
    <div>
      <h1>useCallback Example</h1>
      <button onClick={() => setOtherState(prev => prev + 1)}>
        Update Other State: {otherState}
      </button>
      <ChildComponent onIncrement={handleIncrement} value={count} />
    </div>
  );
};

import React, { useState, useMemo } from 'react';

// 계산 비용이 비싼 함수 (예시)
const calculateExpensiveValue = (num: number): number => {
  console.log('Calculating expensive value...');
  let result = 0;
  for (let i = 0; i < 100000000; i++) {
    result += num;
  }
  return result;
};

const MemoizedValueComponent: React.FC = () => {
  const [inputNum, setInputNum] = useState(1);
  const [otherState, setOtherState] = useState(0);

  // inputNum이 변경될 때만 expensiveValue를 재계산합니다.
  const expensiveValue = useMemo(() => calculateExpensiveValue(inputNum), [inputNum]);

  return (
    <div>
      <h2>useMemo Example</h2>
      <input
        type="number"
        value={inputNum}
        onChange={(e) => setInputNum(Number(e.target.value))}
      />
      <p>Expensive Value: {expensiveValue}</p>

      <button onClick={() => setOtherState(prev => prev + 1)}>
        Update Other State: {otherState}
      </button>
      <p>Other State: {otherState}</p>
    </div>
  );
};

export default MemoizedValueComponent;

function calculatePracticeValue(num: number): number {
  if (!Number.isInteger(num) || num < 0 || num > 10) throw new Error('0~10 정수를 입력하세요');
  let result = 0;
  for (let i = 0; i < 10000; i++) result += num;
  return result;
}