React Testing Library integration in NextJS - Mini Project: Build & Apply

React Testing Library integration

📖 Scenario: You are building a simple Next.js app with a button that toggles a message. You want to write a test to check if the message appears when the button is clicked.

🎯 Goal: Create a React component with a button and a message that shows or hides on click. Then write a test using React Testing Library to verify the toggle behavior.

📋 What You'll Learn

Create a functional React component called ToggleMessage with a button and a message.

Add a state variable showMessage to control message visibility.

Write a test file using React Testing Library to check if clicking the button toggles the message.

Use render, screen, and fireEvent from React Testing Library.

💡 Why This Matters

🌍 Real World

This pattern is common in interactive web apps where UI changes based on user actions, such as toggling menus, modals, or messages.

💼 Career

React Testing Library is widely used in professional React and Next.js projects to write reliable UI tests that simulate real user behavior.

1

DATA SETUP: Create the ToggleMessage component with initial state

Create a functional React component called ToggleMessage. Inside it, create a state variable called showMessage initialized to false using useState. Return a div with a button that says "Toggle Message".

NextJS

import React, { useState } from 'react';

// Your code here

Need a hint?

Use useState(false) to create showMessage. Return a button inside a div.

2

CONFIGURATION: Add the click handler to toggle the message

Add an onClick handler to the button that toggles the showMessage state between true and false using setShowMessage.

NextJS

import React, { useState } from 'react';

export default function ToggleMessage() {
  const [showMessage, setShowMessage] = useState(false);
  return (
    
      Toggle Message
    
  );
}

Need a hint?

Use an arrow function in onClick to call setShowMessage(!showMessage).

3

CORE LOGIC: Show the message conditionally based on state

Inside the div, below the button, add a p element that contains the text "Hello, you toggled me!". Render this p only if showMessage is true using conditional rendering.

NextJS

import React, { useState } from 'react';

export default function ToggleMessage() {
  const [showMessage, setShowMessage] = useState(false);
  return (
    
       setShowMessage(!showMessage)}>Toggle Message
      {/* Add conditional  here */}
    
  );
}

Need a hint?

Use {showMessage && <p>Hello, you toggled me!</p>} to show the message only when showMessage is true.

4

COMPLETION: Write a test to verify the toggle behavior

Create a test file that imports render, screen, and fireEvent from '@testing-library/react' and imports ToggleMessage. Write a test named "toggles message on button click" that renders <ToggleMessage />, clicks the button with text "Toggle Message", and asserts that the message "Hello, you toggled me!" appears using screen.getByText.

NextJS

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

// Write test here
// Your code here

Need a hint?

Use render to render the component, fireEvent.click to click the button, and expect(screen.getByText(...)).toBeInTheDocument() to check the message.