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.

Practice

1. What is the main reason to write tests for Next.js server components?

easy

A. To catch errors early and keep the app stable

B. To improve client-side rendering speed

C. To reduce the size of the JavaScript bundle sent to the browser

D. To enable hot module replacement during development

Solution

1. Step 1: Understand the purpose of testing server components

   Testing server components helps find bugs before the app runs in production, ensuring stability.

2. Step 2: Compare options with testing goals

   Only catching errors early and keeping the app stable matches the main goal of testing server components.

3. Final Answer:

   To catch errors early and keep the app stable -> Option A

4. Quick Check:

   Testing purpose = catch errors early [OK]

Hint: Testing server components mainly prevents bugs early [OK]

Common Mistakes:

• Confusing testing with client-side performance optimization
• Thinking tests reduce bundle size
• Mixing testing with development tooling features

2. Which of the following is the correct way to import the render function for testing a Next.js server component using @testing-library/react?

easy

A. import { renderComponent } from '@testing-library/react';

B. import render from '@testing-library/react';

C. import { renderServer } from '@testing-library/react';

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

Solution

1. Step 1: Recall the correct import syntax

   The official way to import render is using named import: { render } from '@testing-library/react'.

2. Step 2: Check other options for correctness

   Options A, B, and D use incorrect import names or default import which is not supported.

3. Final Answer:

   import { render } from '@testing-library/react'; -> Option D

4. Quick Check:

   Correct import = named render [OK]

Hint: Use named import { render } from testing-library [OK]

Common Mistakes:

• Using default import instead of named import
• Using wrong function names like renderComponent
• Assuming renderServer exists in the library

3. Given this server component test code, what will be the output of the test?

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

test('renders greeting message', () => {
  const { getByText } = render();
  getByText('Hello, Alice!');
});

Assuming Greeting renders Hello, {name}! correctly.

medium

A. Test fails because the component does not render

B. Test fails because getByText is not a function

C. Test passes because the text 'Hello, Alice!' is found

D. Test passes but does not check the text content

Solution

1. Step 1: Understand what getByText does

   getByText searches the rendered output for the exact text. If found, it returns the element; otherwise, it throws an error.

2. Step 2: Analyze the test code behavior

   The test renders Greeting with name 'Alice', so it should render 'Hello, Alice!'. getByText('Hello, Alice!') will find this text, so no error is thrown and test passes.

3. Final Answer:

   Test passes because the text 'Hello, Alice!' is found -> Option C

4. Quick Check:

   getByText finds text = test passes [OK]

Hint: getByText throws error if text missing, else test passes [OK]

Common Mistakes:

• Assuming getByText returns null instead of throwing error
• Thinking render does not work on server components
• Ignoring that test fails if text not found

4. You wrote this test for a server component but it fails with "TypeError: Cannot read property 'props' of undefined". What is the likely cause?

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

test('renders user name', () => {
  const { getByText } = render(UserProfile({ name: 'Bob' }));
  getByText('User: Bob');
});

medium

A. You forgot to import React in the test file

B. You called the component as a function instead of as JSX

C. You used getByText incorrectly without await

D. You passed props with wrong property name

Solution

1. Step 1: Identify how the component is rendered

   The test calls UserProfile({ name: 'Bob' }) directly as a function instead of using JSX syntax <UserProfile name="Bob" /> inside render.

2. Step 2: Understand why this causes error

   Server components expect JSX usage for rendering. Calling as function returns undefined or unexpected value, causing TypeError when render tries to access props.

3. Final Answer:

   You called the component as a function instead of as JSX -> Option B

4. Quick Check:

   Render needs JSX, not direct function call [OK]

Hint: Always render components as JSX, not function calls [OK]

Common Mistakes:

• Calling component as a plain function
• Forgetting JSX angle brackets in render
• Misunderstanding getByText usage

5. You want to test a server component that fetches data asynchronously before rendering. Which approach correctly tests the component's rendered output after data is loaded?

async function fetchUser() { return { name: 'Eve' }; }

function User() {
  const user = fetchUser();
  return <div>User: {user.name}</div>;
}

How should you write the test?

hard

A. Call fetchUser inside the test and pass data as prop to User component

B. Mock fetchUser to return data synchronously and render User component normally

C. Use async/await in the test and render User component with suspense fallback

D. Render User component directly without mocking or waiting

Solution

1. Step 1: Understand server component data fetching

   Server components can fetch data asynchronously but tests must control data to avoid real async calls.

2. Step 2: Choose testing approach

   Calling fetchUser in test and passing data as prop lets test run synchronously and check output reliably.

3. Step 3: Evaluate other options

   Mocking fetchUser synchronously inside component is complex; suspense fallback is for client components; rendering without waiting causes errors.

4. Final Answer:

   Call fetchUser inside the test and pass data as prop to User component -> Option A

5. Quick Check:

   Pass data as prop after fetching in test [OK]

Hint: Fetch data in test, pass as prop to component [OK]

Common Mistakes:

• Trying to test async fetch inside component directly
• Ignoring need to mock or control data in tests
• Using suspense fallback incorrectly in server component tests