"scripts": {
  "test": "vitest run"
},
"devDependencies": {
  "vitest": "^2.0.0",
  "@testing-library/react": "^16.0.0",
  "@testing-library/jest-dom": "^6.0.0",
  "@testing-library/user-event": "^14.0.0",
  "jsdom": "^25.0.0"
}

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: './src/test/setup.js',
  },
});

// src/test/setup.js
import '@testing-library/jest-dom/vitest';

// src/utils/validateBookForm.js
export function validateBookForm(values) {
  const errors = {};
  if (!values.title || !values.title.trim()) {
    errors.title = '제목을 입력하세요';
  }
  if (!values.author || !values.author.trim()) {
    errors.author = '저자를 입력하세요';
  }
  return errors;
}

// src/components/BookForm.jsx
// 08편에서 만든 제출 상태 표시(useActionState)는 상위 페이지(NewBookPage)가 담당한다.
// BookForm 자신은 onSubmit·pending만 props로 받는 형태로 단순화해 테스트 대상을 좁힌다.
import { useState } from 'react';
import { validateBookForm } from '../utils/validateBookForm';
 
export default function BookForm({ onSubmit, pending }) {
  const [values, setValues] = useState({ title: '', author: '' });
  const [errors, setErrors] = useState({});
 
  function handleChange(event) {
    const { name, value } = event.target;
    setValues((prev) => ({ ...prev, [name]: value }));
  }
 
  function handleSubmit(event) {
    event.preventDefault();
    const nextErrors = validateBookForm(values);
    setErrors(nextErrors);
    if (Object.keys(nextErrors).length === 0) {
      onSubmit(values);
    }
  }
 
  return (
    <form onSubmit={handleSubmit} noValidate>
      <div>
        <label htmlFor="title">제목</label>
        <input
          id="title"
          name="title"
          value={values.title}
          onChange={handleChange}
          aria-invalid={Boolean(errors.title)}
          aria-describedby={errors.title ? 'title-error' : undefined}
        />
        {errors.title && (
          <p id="title-error" role="alert">
            {errors.title}
          </p>
        )}
      </div>
      <div>
        <label htmlFor="author">저자</label>
        <input
          id="author"
          name="author"
          value={values.author}
          onChange={handleChange}
          aria-invalid={Boolean(errors.author)}
          aria-describedby={errors.author ? 'author-error' : undefined}
        />
        {errors.author && (
          <p id="author-error" role="alert">
            {errors.author}
          </p>
        )}
      </div>
      <button type="submit" disabled={pending}>
        {pending ? '저장 중...' : '저장'}
      </button>
    </form>
  );
}

// src/components/BookForm.test.jsx
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import BookForm from './BookForm';
 
describe('BookForm', () => {
  it('제목과 저자를 비운 채 제출하면 에러 메시지를 보여준다', async () => {
    const user = userEvent.setup();
    const handleSubmit = vi.fn();
    render(<BookForm onSubmit={handleSubmit} pending={false} />);
 
    await user.click(screen.getByRole('button', { name: '저장' }));
 
    expect(screen.getByRole('alert', { name: '제목을 입력하세요' })).toBeInTheDocument();
    expect(handleSubmit).not.toHaveBeenCalled();
  });
 
  it('제목과 저자를 채우면 onSubmit이 입력값과 함께 호출된다', async () => {
    const user = userEvent.setup();
    const handleSubmit = vi.fn();
    render(<BookForm onSubmit={handleSubmit} pending={false} />);
 
    await user.type(screen.getByLabelText('제목'), '이펙티브 자바');
    await user.type(screen.getByLabelText('저자'), '조슈아 블로크');
    await user.click(screen.getByRole('button', { name: '저장' }));
 
    expect(handleSubmit).toHaveBeenCalledWith({ title: '이펙티브 자바', author: '조슈아 블로크' });
  });
});

npm run test

✓ src/components/BookForm.test.jsx (2)
  ✓ BookForm > 제목과 저자를 비운 채 제출하면 에러 메시지를 보여준다
  ✓ BookForm > 제목과 저자를 채우면 onSubmit이 입력값과 함께 호출된다

Test Files  1 passed (1)
     Tests  2 passed (2)