Testing server components in NextJS - Mini Project: Build & Apply

Testing server components

📖 Scenario: You are building a Next.js app that uses server components to fetch and display user data from a simple data source.To ensure your server component works correctly, you want to write a test that checks the rendered output matches the expected user name.

🎯 Goal: Create a server component that fetches user data and renders the user's name. Then write a test to verify the component output contains the correct user name.

📋 What You'll Learn

Create a server component named UserProfile that returns a heading with the user's name.

Use a simple user data object with name property set to 'Alice'.

Write a test using @testing-library/react and @testing-library/jest-dom to check the rendered output.

Ensure the test imports and renders the UserProfile server component correctly.

💡 Why This Matters

🌍 Real World

Testing server components ensures your Next.js app renders correct data before deployment, preventing bugs in production.

💼 Career

Knowing how to test server components is essential for Next.js developers to maintain reliable and maintainable codebases.

1

Create user data object

Create a constant called user with an object containing the key name set to the string 'Alice'.

NextJS

# Create a constant user with name 'Alice'
# Your code here

Need a hint?

Use const user = { name: 'Alice' } to create the user object.

2

Create UserProfile server component

Create a server component named UserProfile that returns a JSX heading <h1> containing the user's name from the user object.

NextJS

const user = { name: 'Alice' }

// Create UserProfile server component that returns {user.name}
// Your code here

Need a hint?

Define a function named UserProfile that returns <h1>{user.name}</h1>.

3

Write test for UserProfile component

Write a test named 'renders user name' that imports UserProfile and uses @testing-library/react to render it. Then use screen.getByRole('heading') and expect with toHaveTextContent('Alice') to verify the heading text.

NextJS

const user = { name: 'Alice' }

export default function UserProfile() {
  return {user.name}
}

// Write a test named 'renders user name' to check the heading text
// Your code here

Need a hint?

Use render to render <UserProfile /> and screen.getByRole('heading') to find the heading. Then check text content with expect(...).toHaveTextContent('Alice').

4

Export UserProfile and finalize test file

Ensure the UserProfile component is exported as default and the test is included in the same file. The file should import @testing-library/react, @testing-library/jest-dom, and export UserProfile as default.

NextJS

import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import UserProfile from './UserProfile'

const user = { name: 'Alice' }

export default function UserProfile() {
  return {user.name}
}

// Confirm export default and test are present
// Your code here

Need a hint?

Make sure UserProfile is exported as default and the test is included in the file.