Sayfaları Tümleştirme Sınamasından Geçirme
Uygulamanızın farklı bölümlerinin birlikte çalıştığından emin olmak için Next.js sayfaları ve API yollarında tümleştirme sınamaları gerçekleştirin.
Sayfaları Tümleştirme Sınamasından Geçirme, CoddyKit'te ücretsiz bir Next.js 15 Fullstack (App Router + Server Actions) dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Next.js 15 Fullstack (App Router + Server Actions) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Next.js 15 Fullstack (App Router + Server Actions) kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Intro to Integration Tests
Welcome! In this lesson, we'll explore integration testing for your Next.js applications.
Integration tests verify that different parts of your application work correctly together. Instead of isolated units, we check the flow between components, pages, and API routes.
Why Test Pages & Routes?
For Next.js, integration testing is crucial because it ensures:
- Pages render correctly with their data.
- User interactions (like form submissions) trigger the right backend logic.
- API routes respond as expected when called from the frontend or other services.
It helps catch issues that unit tests might miss when components interact.
Tools: Jest, RTL, next/test-utils
We'll primarily use these tools for integration testing:
- Jest: A popular JavaScript testing framework.
- React Testing Library (RTL): For rendering React components (like your Next.js pages) and simulating user interactions.
@next/test-utils: Provides helpers specifically for testing Next.js features, like API routes.
Testing a Page Component
To test a Next.js page component, we can render it using React Testing Library. This allows us to assert if the correct content is displayed and interact with elements on the page.
You'll typically import the page component directly and render it in your test file.
Code: Simple Page Test
Here's how you might test a simple About page to ensure its heading is rendered.
// 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();
});
});User Interaction in Tests
Integration tests often involve simulating user behavior. React Testing Library provides utilities like fireEvent (or userEvent for more realistic interactions) to click buttons, type into inputs, and more.
This lets you verify that your page responds correctly to user input, just like a real user would.
// 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();
});
});Testing Next.js API Routes
Next.js API routes are server-side functions. You can test them by importing their handler function and using createNextApiHandler from @next/test-utils to simulate requests.
This allows you to send mock requests and assert the status code and JSON response.
// 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' });
});
});Mocking External Calls in API
API routes often interact with databases or other external services. In integration tests, you should mock these external dependencies to ensure your tests are fast and predictable.
Jest's mocking capabilities are perfect for this, allowing you to control the return values of these external calls.
// 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();
});
});Pages & Server Actions Integration
Testing pages that use Server Actions involves rendering the page, simulating a form submission, and asserting that the Server Action was called with the correct data.
You can mock the Server Action function itself to control its return value and verify it was invoked.
// 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();
});
});Test Your Knowledge
Time for a quick check on integration testing!
Recap: Building Robust Apps
Great job! You've learned the fundamentals of integration testing in Next.js.
- We covered how to test pages and API routes.
- You saw how to simulate user interactions and mock external dependencies.
- Tools like Jest, React Testing Library, and
@next/test-utilsare essential.
By writing integration tests, you build more robust applications and catch bugs earlier in the development process!
Sıkça Sorulan Sorular
“Sayfaları Tümleştirme Sınamasından Geçirme” dersi ücretsiz mi?
Evet — “Sayfaları Tümleştirme Sınamasından Geçirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Next.js 15 Fullstack (App Router + Server Actions) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Next.js 15 Fullstack (App Router + Server Actions) kursu toplamda 4 dersten oluşur.
“Sayfaları Tümleştirme Sınamasından Geçirme” dersinde ne öğreneceğim?
Uygulamanızın farklı bölümlerinin birlikte çalıştığından emin olmak için Next.js sayfaları ve API yollarında tümleştirme sınamaları gerçekleştirin. Next.js 15 Fullstack (App Router + Server Actions) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Next.js 15 Fullstack (App Router + Server Actions) öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Next.js 15 Fullstack (App Router + Server Actions), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Sayfaları Tümleştirme Sınamasından Geçirme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Next.js 15 Fullstack (App Router + Server Actions) dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Next.js 15 Fullstack (App Router + Server Actions) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Bileşenleri Birim Sınamasından Geçirme
- Sayfaları Tümleştirme Sınamasından Geçirme
- Playwright/Cypress ile Uçtan Uca Test
- API Rotalarını Taklit Etme ve Test Etme