Testing useState with Jest and TypeScript

Testing React components that utilize the useState hook is crucial for ensuring the correct behavior of your application. This challenge focuses on writing Jest tests for a simple component that uses useState to manage a counter. Successfully completing this challenge will solidify your understanding of how to mock React hooks and verify state updates within your tests.

Problem Description

You are tasked with creating Jest tests for a React component called Counter. The Counter component displays a count and provides a button to increment the count. The component uses the useState hook to manage the count. Your goal is to write tests that verify the initial state, the button's functionality (incrementing the count), and that the component renders the correct count value.

What needs to be achieved:

• Write Jest tests to verify the initial state of the Counter component.
• Write Jest tests to verify that clicking the increment button updates the state correctly.
• Write Jest tests to verify that the component renders the current count value.

Key requirements:

• Use Jest and React Testing Library.
• Mock the useState hook to control the state during testing.
• Ensure the tests are readable and maintainable.

Expected behavior:

• The initial count should be 0.
• Clicking the increment button should increase the count by 1.
• The component should render the current count value.

Edge cases to consider:

• While this problem focuses on basic functionality, consider how you might test edge cases like negative increments or very large count values in a more complex scenario. For this challenge, focus on the core increment functionality.

Examples

Example 1:

Input: Counter component with initial count of 0 and an increment button.
Output: Test should pass, verifying initial count is 0.
Explanation: The test should render the component and assert that the initial displayed count is 0.

Example 2:

Input: Counter component with initial count of 0 and an increment button. User clicks the button once.
Output: Test should pass, verifying count increments to 1.
Explanation: The test should render the component, click the increment button, and assert that the displayed count is 1.

Example 3:

Input: Counter component with initial count of 5 and an increment button. User clicks the button twice.
Output: Test should pass, verifying count increments to 7.
Explanation: The test should render the component, click the increment button twice, and assert that the displayed count is 7.

Constraints

• You must use React Testing Library for rendering and interacting with the component.
• You must mock the useState hook.
• The tests should be written in TypeScript.
• The component code is provided below. Do not modify the component code.

Notes

• Consider using act() from React Testing Library to wrap state updates, ensuring proper synchronization with React's internal updates.
• Focus on testing the component's behavior, not the internal implementation details of useState.
• Think about how to isolate the component under test and avoid external dependencies.

import React, { useState } from 'react';

interface CounterProps {
  initialCount?: number;
}

const Counter: React.FC<CounterProps> = ({ initialCount = 0 }) => {
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;