Simulação e testes de componentes do servidor
Teste componentes assíncronos do servidor, ações do servidor e manipuladores de rotas simulando camadas de dados e chamadas de rede para manter seus testes fullstack do Next.js rápidos e confiáveis.
Simulação e testes de componentes do servidor é uma aula grátis de Next.js 15 Fullstack Web Apps no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Next.js 15 Fullstack Web Apps, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Next.js 15 Fullstack Web Apps inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
The Server Component Challenge
Server Components are async and run on the server, so classic client-render test tools do not fit perfectly. The key is to test their data dependencies in isolation and test the rendered output separately.
Separate Logic from Rendering
Extract data-fetching and business logic into plain functions. Pure functions are trivial to unit test without rendering anything.
export function formatPrice(cents) {
return '$' + (cents / 100).toFixed(2);
}Testing a Pure Helper
A pure helper is testable anywhere with no mocks at all.
function formatPrice(cents) {
return '$' + (cents / 100).toFixed(2);
}
console.log(formatPrice(1999) === '$19.99');
console.log(formatPrice(500) === '$5.00');Mocking the Data Layer
Server Components usually call a repository or ORM. Mock that module so tests do not hit a real database.
import { vi } from 'vitest';
import * as db from '@/lib/db';
vi.spyOn(db, 'getUser').mockResolvedValue({ id: 1, name: 'Ada' });Rendering an Async Server Component
Because the component is async, you can await it to get its element tree, then assert on it with your render utility.
import { render, screen } from '@testing-library/react';
import Profile from '@/app/profile/page';
it('shows the name', async () => {
render(await Profile());
expect(screen.getByText('Ada')).toBeInTheDocument();
});Mocking fetch with MSW
When a component fetches from an external API, intercept the request with Mock Service Worker (MSW) instead of stubbing fetch by hand.
import { http, HttpResponse } from 'msw';
export const handlers = [
http.get('https://api.example.com/user', () =>
HttpResponse.json({ name: 'Ada' })
),
];Testing Server Actions
Server Actions are async functions. Call them directly with mocked dependencies and assert on side effects and return values.
import { createTodo } from '@/app/actions';
import * as db from '@/lib/db';
it('creates a todo', async () => {
const spy = vi.spyOn(db, 'insertTodo').mockResolvedValue({ id: 1 });
await createTodo('Write tests');
expect(spy).toHaveBeenCalledWith('Write tests');
});Mocking revalidatePath
Actions often call revalidatePath. Mock next/cache so the call does not throw outside a request scope, and assert it was invoked.
vi.mock('next/cache', () => ({
revalidatePath: vi.fn(),
}));Testing Route Handlers
Route handlers take a Request and return a Response. Build a request, call the handler, and inspect the response.
import { POST } from '@/app/api/todos/route';
it('returns 400 on empty body', async () => {
const req = new Request('http://t/api/todos', { method: 'POST', body: '{}' });
const res = await POST(req);
expect(res.status).toBe(400);
});Keep Tests Deterministic
Avoid flaky tests:
- Reset mocks between tests (
vi.clearAllMocks()). - Freeze time when testing dates.
- Never call real networks or databases.
The Testing Pyramid
Balance your suite: many fast unit tests for logic, fewer integration tests for components plus data, and a small set of E2E tests (Playwright) for critical flows.
Quick Check
What is the recommended way to test an async Server Component that calls your ORM?
Recap
You learned to test fullstack Next.js code:
- Separate pure logic for easy unit tests.
- Mock the data layer and use MSW for network calls.
- Await async Server Components; call Server Actions and route handlers directly.
- Keep tests deterministic and follow the testing pyramid.
Perguntas Frequentes
A aula “Simulação e testes de componentes do servidor” é grátis?
Sim — o texto completo de “Simulação e testes de componentes do servidor” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Next.js 15 Fullstack Web Apps, atualize para CoddyKit PRO. O curso de Next.js 15 Fullstack Web Apps inclui 4 aulas no total.
O que vou aprender em “Simulação e testes de componentes do servidor”?
Teste componentes assíncronos do servidor, ações do servidor e manipuladores de rotas simulando camadas de dados e chamadas de rede para manter seus testes fullstack do Next.js rápidos e confiáveis. Você pratica Next.js 15 Fullstack Web Apps com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Next.js 15 Fullstack Web Apps?
Nenhuma experiência prévia é necessária. Next.js 15 Fullstack Web Apps no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Simulação e testes de componentes do servidor”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Next.js 15 Fullstack Web Apps?
Sim. Cada aula de Next.js 15 Fullstack Web Apps inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Testes Unitários e de Integração
- Testes de Ponta a Ponta com Playwright
- Monorrepositórios e Microfrontends
- Simulação e testes de componentes do servidor