Pengujian Integrasi Halaman

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

// __tests__/about.test.js
import { render, screen } from '@testing-library/react';
import About from '../pages/about';

describe('About Page', () => {
  it('renders the about page heading', () => {
    render(<About />);
    const heading = screen.getByRole('heading', { name: /About Us/i });
    expect(heading).toBeInTheDocument();
  });
});

// components/Counter.js
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// __tests__/counter.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from '../components/Counter';

describe('Counter Component', () => {
  it('increments count on button click', () => {
    render(<Counter />);
    const button = screen.getByRole('button', { name: /Increment/i });
    fireEvent.click(button);
    expect(screen.getByText(/Count: 1/i)).toBeInTheDocument();
  });
});

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' });
}

// __tests__/api/hello.test.js
import { createNextApiHandler } from '@next/test-utils';
import handler from '../../pages/api/hello';

describe('/api/hello', () => {
  it('returns a name', async () => {
    const testHandler = createNextApiHandler(handler);
    const res = await testHandler({ method: 'GET' });
    expect(res.statusCode).toBe(200);
    expect(await res.json()).toEqual({ name: 'John Doe' });
  });
});

// lib/db.js (simplified)
export const getUser = async (id) => ({ id, name: 'Mock User' });

// pages/api/user/[id].js
import { getUser } from '../../../lib/db';

export default async function handler(req, res) {
  const { id } = req.query;
  const user = await getUser(id);
  res.status(200).json(user);
}

// __tests__/api/user.test.js
import { createNextApiHandler } from '@next/test-utils';
import handler from '../../pages/api/user/[id]';
import * as db from '../../lib/db';

describe('/api/user/[id]', () => {
  it('returns a user with mocked DB', async () => {
    jest.spyOn(db, 'getUser').mockResolvedValue({ id: '1', name: 'Test User' });

    const testHandler = createNextApiHandler(handler);
    const res = await testHandler({ method: 'GET', query: { id: '1' } });
    expect(res.statusCode).toBe(200);
    expect(await res.json()).toEqual({ id: '1', name: 'Test User' });

    jest.restoreAllMocks();
  });
});

// app/actions.js
'use server';
export async function submitForm(formData) {
  const name = formData.get('name');
  return { success: true, message: `Hello, ${name}!` };
}

// app/page.js
import { submitForm } from './actions';

export default function Page() {
  return (
    <form action={submitForm}>
      <input type="text" name="name" defaultValue="Guest" />
      <button type="submit">Say Hello</button>
    </form>
  );
}

// __tests__/page.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Page from '../app/page';
import * as actions from '../app/actions';

describe('Home Page with Server Action', () => {
  it('submits form and calls server action', async () => {
    const mockSubmitForm = jest.spyOn(actions, 'submitForm')
      .mockResolvedValue({ success: true, message: 'Hello, Test User!' });

    render(<Page />);

    const input = screen.getByRole('textbox', { name: /name/i });
    fireEvent.change(input, { target: { value: 'Test User' } });

    const button = screen.getByRole('button', { name: /Say Hello/i });
    fireEvent.click(button);

    expect(mockSubmitForm).toHaveBeenCalledWith(
      expect.any(FormData)
    );
    mockSubmitForm.mockRestore();
  });
});