Testing React Component Rendering with Jest and TypeScript

This challenge focuses on writing Jest tests to verify the correct rendering of a simple React component. Testing component rendering is crucial for ensuring your UI behaves as expected and catches regressions early in the development process. You'll be using TypeScript to define your component and tests, emphasizing type safety and maintainability.

Problem Description

You are given a React component called Greeting. This component accepts a name prop (string) and displays a greeting message. Your task is to write a Jest test suite that verifies the following:

1. The component renders without errors when a valid name prop is provided.
2. The component displays the correct greeting message based on the provided name.
3. The component handles the case where the name prop is not provided (defaults to "World").

Key Requirements:

• Use Jest and React Testing Library for testing.
• Write tests in TypeScript.
• Ensure the tests are readable and well-structured.
• Verify the rendered output using React Testing Library's screen API.

Expected Behavior:

The test suite should pass if the Greeting component renders correctly and displays the expected greeting messages for different name prop values. The tests should fail if the component fails to render, displays incorrect messages, or doesn't handle the default case properly.

Edge Cases to Consider:

• Empty string as name prop.
• null or undefined as name prop (should default to "World").
• Non-string name prop (though TypeScript should prevent this, it's good to be aware).

Examples

Example 1:

Input: <Greeting name="Alice" />
Output: "Hello, Alice!"
Explanation: The component should render the greeting message with the provided name.

Example 2:

Input: <Greeting />
Output: "Hello, World!"
Explanation: The component should render the default greeting message when no name is provided.

Example 3:

Input: <Greeting name="" />
Output: "Hello, !"
Explanation: The component should render the greeting message with an empty string if the name is an empty string.

Constraints

• You must use React Testing Library's screen API for assertions.
• The component code is provided below. You are not allowed to modify the component code itself.
• Tests should be written in a single test file.
• The tests should be reasonably performant (avoid unnecessary re-renders or complex setups).

Notes

• Consider using render from React Testing Library to render the component within a testing container.
• Use screen.getByText to find elements by their text content.
• Think about how to structure your tests to cover all the required scenarios efficiently.
• Remember to import necessary modules from React Testing Library and Jest.
• The component code is provided below for reference.

import React from 'react';

interface GreetingProps {
  name?: string;
}

const Greeting: React.FC<GreetingProps> = ({ name = "World" }) => {
  return (
    <div>
      Hello, {name}!
    </div>
  );
};

export default Greeting;