Testing a React Component with Cypress Component Testing and Jest

This challenge focuses on integrating Cypress component testing with Jest for a robust and reliable testing workflow. You'll be writing a Cypress component test for a simple React component, ensuring it renders correctly and interacts as expected, while leveraging Jest for assertions and mocking. This is crucial for verifying the UI and functionality of individual components in isolation, leading to more maintainable and testable codebases.

Problem Description

You are tasked with creating a Cypress component test for a React component called Greeting. The Greeting component accepts a name prop and displays a personalized greeting. The component also has a button that, when clicked, toggles a showExtraMessage state, displaying an additional message if showExtraMessage is true.

What needs to be achieved:

1. Mount the Greeting component using Cypress's component mounting capabilities.
2. Verify that the initial greeting displays the provided name prop.
3. Verify that the "Show Extra Message" button exists.
4. Click the "Show Extra Message" button.
5. Verify that the extra message is displayed after clicking the button.
6. Click the button again to toggle the state back.
7. Verify that the extra message is no longer displayed.

Key Requirements:

• Use Cypress's mount command to render the component.
• Utilize Cypress's assertion commands (e.g., should, contain) to verify the component's state and behavior.
• Ensure the test is isolated and doesn't rely on external dependencies.
• The test should be written in TypeScript.

Expected Behavior:

The test should pass if the Greeting component renders correctly, the button functions as expected, and the extra message is displayed and hidden appropriately. The test should fail if any of these conditions are not met.

Edge Cases to Consider:

• What happens if the name prop is an empty string? (The greeting should still render, but without a name).
• Ensure the button is clickable and triggers the state change.

Examples

Example 1:

Input: Greeting component with name prop set to "Alice"
Output: The component renders with the text "Hello, Alice!" and a button labeled "Show Extra Message". Clicking the button displays "Welcome back, Alice!". Clicking it again hides the extra message.
Explanation: This demonstrates the basic functionality of the component and the test's ability to verify it.

Example 2:

Input: Greeting component with name prop set to "" (empty string)
Output: The component renders with the text "Hello, !" and a button labeled "Show Extra Message". Clicking the button displays "Welcome back, !". Clicking it again hides the extra message.
Explanation: This tests the edge case of an empty name prop.

Constraints

• The Greeting component is provided (see below). You are only responsible for writing the Cypress component test.
• The test should be written in TypeScript.
• The test should be concise and focused on the specified functionality.
• The test should not rely on any external dependencies beyond Cypress and Jest.

Notes

• Consider using cy.get to select elements within the component.
• Use cy.click to simulate user interactions.
• Utilize cy.should with appropriate assertions to verify the component's state.
• Remember to import the Greeting component correctly within your test file.
• The provided Greeting component uses React Hooks.

Provided Greeting Component (TypeScript):

import React, { useState } from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  const [showExtraMessage, setShowExtraMessage] = useState(false);

  const handleToggleExtraMessage = () => {
    setShowExtraMessage(!showExtraMessage);
  };

  return (
    <div>
      <p>Hello, {name}!</p>
      <button onClick={handleToggleExtraMessage}>Show Extra Message</button>
      {showExtraMessage && <p>Welcome back, {name}!</p>}
    </div>
  );
};

export default Greeting;