Testing server components in NextJS - Step-by-Step Execution

Concept Flow - Testing server components

Write Server Component

↓

Write Test for Server Component

↓

Run Test Environment

↓

Render Server Component in Test

↓

Check Output or Behavior

↓

Pass or Fail Test

↓

Fix or Refactor if Needed

↩Back to Write Test

This flow shows writing a server component, creating a test for it, running the test to render the component, checking the output, and fixing issues if tests fail.

Execution Sample

NextJS

import { render } from '@testing-library/react/server';
import Greeting from './Greeting';

test('renders greeting message', () => {
  const output = render(<Greeting name="Alice" />);
  expect(output).toContain('Hello, Alice!');
});

This test renders a server component Greeting with a prop and checks if the output contains the expected greeting text.

Execution Table

Step	Action	Input/State	Output/Result
1	Import render and component	N/A	Ready to render Greeting
2	Call render with <Greeting name="Alice" />	name = "Alice"	"<h1>Hello, Alice!</h1>" string output
3	Check if output contains 'Hello, Alice!'	"<h1>Hello, Alice!</h1>"	True - test passes
4	Test ends	Test passed	No errors

💡 Test ends after confirming output contains expected greeting text.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
output	undefined	"<h1>Hello, Alice!</h1>"	"<h1>Hello, Alice!</h1>"	"<h1>Hello, Alice!</h1>"

Key Moments - 2 Insights

Why do we use '@testing-library/react/server' render instead of normal React render?

Because server components run on the server and return HTML strings, we use the server render method to get the output string directly, as shown in step 2 of the execution_table.

How does the test check the component output without a browser?

The render function returns the HTML string output of the server component, so the test checks this string directly for expected content, as in step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'output' after step 2?

A null

B "<h1>Hello, Alice!</h1>"

C undefined

D "Hello, Alice!"

💡 Hint

Check the variable_tracker row for 'output' after step 2.

At which step does the test confirm the output contains the expected greeting?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the execution_table row describing the check action.

If the component rendered '<h1>Hi, Alice!</h1>' instead, what would happen at step 3?

A Test fails because output does not contain 'Hello, Alice!'

B Test passes because output contains 'Alice'

C Test passes because output is a string

D Test fails because render throws error

💡 Hint

Step 3 checks for exact substring 'Hello, Alice!' in output.

Concept Snapshot

Testing Server Components in Next.js:
- Use '@testing-library/react/server' render to get HTML string output.
- Render component with props inside test function.
- Check output string for expected content.
- No browser needed; tests run on server.
- Fix component or test if output differs.

Full Transcript

This visual execution shows how to test Next.js server components. First, you write the server component and import the server render function from '@testing-library/react/server'. Then, in the test, you render the component with props and get an HTML string output. The test checks if this output contains the expected text. If it does, the test passes. This method works without a browser because server components produce HTML strings directly. If the output is different, the test fails and you can fix the component or test accordingly.