React 개발자 도구와 테스트 - React, 알고 쓰자 13일차

React Mastering Developer Tools & Testing - React Explained Day 13

import React, { useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}
 
export default Counter;

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom"; // 커스텀 DOM 매처 사용 (toBeInTheDocument 등)
import Counter from "./Counter";
 
describe("Counter 컴포넌트", () => {
  it("초기값이 0으로 렌더링된다", () => {
    render(<Counter />); // 1. 컴포넌트 렌더링
    // 2. 화면에서 요소 찾기 (텍스트 내용으로)
    const countElement = screen.getByText("현재 카운트: 0");
    // 3. 단언(Assertion) - 요소가 존재하는지 확인
    expect(countElement).toBeInTheDocument();
  });
 
  it("증가 버튼 클릭 시 카운트가 1 증가한다", () => {
    render(<Counter />);
    // 버튼 찾기 (버튼의 텍스트 이름으로)
    const incrementButton = screen.getByRole("button", { name: "증가" });
    // 이벤트 발생시키기
    fireEvent.click(incrementButton);
    // 결과 확인 (변경된 텍스트로 요소 찾기)
    const countElement = screen.getByText("현재 카운트: 1");
    expect(countElement).toBeInTheDocument();
  });
 
  it("감소 버튼 클릭 시 카운트가 -1 감소한다", () => {
    render(<Counter />);
    const decrementButton = screen.getByRole("button", { name: "감소" });
    fireEvent.click(decrementButton);
    const countElement = screen.getByText("현재 카운트: -1");
    expect(countElement).toBeInTheDocument();
  });
});

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom'; // 추가적인 DOM 매처 사용 가능
import Button from './Button'; // 테스트할 컴포넌트
 
test('버튼이 정상적으로 렌더링된다', () => {
  render(<Button>클릭하세요</Button>);
 
  // '클릭하세요' 텍스트를 가진 버튼(role)이 화면에 있는지 확인
  const buttonElement = screen.getByRole('button', { name: '클릭하세요' });
  expect(buttonElement).toBeInTheDocument();
});
 
test('disabled prop이 전달되면 버튼이 비활성화된다', () => {
  render(<Button disabled>클릭하세요</Button>);
 
  const buttonElement = screen.getByRole('button', { name: '클릭하세요' });
  // 버튼이 비활성화 상태인지 확인
  expect(buttonElement).toBeDisabled();
});

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event'; // 사용자 이벤트 시뮬레이션
import Button from './Button';
 
test('버튼 클릭 시 onClick 핸들러가 호출된다', async () => {
  const handleClick = jest.fn(); // jest.fn()으로 모의(mock) 함수 생성
  render(<Button onClick={handleClick}>클릭하세요</Button>);
 
  const buttonElement = screen.getByRole('button', { name: '클릭하세요' });
  // 사용자 이벤트 시뮬레이션 (실제 클릭과 더 유사)
  await userEvent.click(buttonElement);
 
  // handleClick 함수가 1번 호출되었는지 확인
  expect(handleClick).toHaveBeenCalledTimes(1);
});

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import axios from 'axios'; // API 호출 라이브러리
import UserProfileLoader from './UserProfileLoader';
 
// axios.get 함수를 모킹
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;
 
test('사용자 데이터 로드 후 프로필 정보 표시', async () => {
  // API 성공 응답 모킹
  const mockUserData = { name: 'Alice', email: 'alice@example.com' };
  mockedAxios.get.mockResolvedValue({ data: mockUserData });
 
  render(<UserProfileLoader userId="1" />);
 
  // 초기 로딩 상태 확인 (선택적)
  expect(screen.getByText(/로딩 중/i)).toBeInTheDocument();
 
  // API 호출 후 데이터가 화면에 표시될 때까지 기다림
  // findBy* 쿼리는 요소가 나타날 때까지 자동으로 기다림 (기본 타임아웃 1000ms)
  const userNameElement = await screen.findByText(mockUserData.name);
  expect(userNameElement).toBeInTheDocument();
 
  // waitFor: 특정 조건이 만족될 때까지 기다림 (find* 로 충분하지 않을 때 사용)
  // await waitFor(() => {
  //   expect(screen.getByText(mockUserData.email)).toBeInTheDocument();
  // });
 
  // 로딩 메시지가 사라졌는지 확인
  expect(screen.queryByText(/로딩 중/i)).not.toBeInTheDocument();
});
 
test('API 호출 실패 시 에러 메시지 표시', async () => {
  // API 실패 응답 모킹
  const errorMessage = '데이터를 불러올 수 없습니다.';
  mockedAxios.get.mockRejectedValue(new Error(errorMessage));
 
  render(<UserProfileLoader userId="1" />);
 
  // 에러 메시지가 화면에 표시될 때까지 기다림
  const errorElement = await screen.findByText(new RegExp(errorMessage, 'i'));
  expect(errorElement).toBeInTheDocument();
});

npx storybook@latest init

npm run storybook
 # 또는 (yarn을 사용한다면)
yarn storybook

import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import Button from './Button'; // 실제 컴포넌트
 
// 메타 정보: 컴포넌트 설명서 표지 같은 거예요
const meta: Meta<typeof Button> = {
  title: 'Components/Button', // 어디에 둘지 정해요
  component: Button, // 주인공 컴포넌트
  tags: ['autodocs'], // 자동으로 설명서 만들기
  argTypes: { /* ... props 조종판 설정 ... */ },
};
export default meta;
 
type Story = StoryObj<typeof Button>;
 
// 첫 번째 이야기: 기본 모습 버튼
export const Primary: Story = {
  args: { primary: true, label: 'Button' }, // 이렇게 생겼어요 하고 알려줘요
};
 
// 두 번째 이야기: 보조 역할 버튼
export const Secondary: Story = {
  args: { label: 'Button' },
};
 
// ... 더 많은 이야기들 ...