Why testing Next.js matters - See It in Action

Why Testing Next.js Matters

📖 Scenario: You are building a simple Next.js app that shows a greeting message. You want to make sure the greeting always appears correctly. Testing helps catch mistakes early and keeps your app working well as you add features.

🎯 Goal: Create a Next.js component that displays a greeting message. Then add a simple test to check that the greeting renders as expected.

📋 What You'll Learn

Create a Next.js functional component called Greeting that returns a <h1> with the text Hello, Next.js!

Add a configuration variable called greetingText with the value 'Hello, Next.js!'

Use the greetingText variable inside the Greeting component to display the message

Write a test using React Testing Library to check that the Greeting component renders the greeting text

💡 Why This Matters

🌍 Real World

Testing Next.js components ensures your web app works as expected for users and helps catch bugs early during development.

💼 Career

Knowing how to write tests for Next.js components is a valuable skill for frontend developers to build reliable, maintainable applications.

1

Create the Greeting component

Create a Next.js functional component called Greeting that returns an <h1> element with the text Hello, Next.js!.

NextJS

# Create a functional component named Greeting
# Your code here

Need a hint?

Use a function named Greeting that returns JSX with an <h1> tag containing the exact text Hello, Next.js!.

2

Add a greetingText variable

Add a constant variable called greetingText with the value 'Hello, Next.js!' above the Greeting component.

NextJS

const greetingText = ''

export default function Greeting() {
  return Hello, Next.js!;
}
# Define greetingText with the exact string 'Hello, Next.js!'

Need a hint?

Define greetingText as a constant string with the exact value 'Hello, Next.js!'.

3

Use greetingText inside Greeting component

Update the Greeting component to use the greetingText variable inside the <h1> element instead of the hardcoded string.

NextJS

const greetingText = 'Hello, Next.js!';

export default function Greeting() {
  return {greetingText};
}
# Replace the hardcoded text with greetingText variable

Need a hint?

Use curly braces {} inside JSX to insert the greetingText variable.

4

Write a test for Greeting component

Write a test using React Testing Library that imports the Greeting component and checks that it renders the text Hello, Next.js! inside an <h1> element.

NextJS

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

// Write a test that checks the greeting text
// Your code here

Need a hint?

Use render to show the component, then screen.getByRole('heading', { level: 1 }) to find the <h1>, and expect(...).toHaveTextContent(...) to check the text.