Testing DOM Interactions with Jest and TypeScript

This challenge focuses on writing robust Jest tests for components that manipulate the Document Object Model (DOM). Testing DOM interactions directly can be tricky, but Jest provides tools to simulate user actions and verify that the DOM changes as expected. This is crucial for ensuring the correctness and stability of your web application's user interface.

Problem Description

You are tasked with creating Jest tests for a simple React component called Counter. The Counter component displays a number and provides two buttons: "Increment" and "Decrement." Clicking "Increment" increases the displayed number by 1, and clicking "Decrement" decreases it by 1.

Your goal is to write Jest tests that:

1. Mount the component: Use mount from react-testing-library to render the Counter component into a DOM node for testing.
2. Verify initial state: Ensure the component initially displays the correct number (0).
3. Simulate button clicks: Use simulate from react-testing-library to trigger clicks on the "Increment" and "Decrement" buttons.
4. Verify DOM updates: After each click, verify that the displayed number in the DOM has been updated correctly.
5. Handle edge cases: Consider what happens when the counter reaches its minimum or maximum value (in this case, we'll assume a minimum of 0 and no maximum).

Key Requirements:

• Use react-testing-library for mounting and simulating events.
• Use jest-dom for making DOM assertions.
• Write clear and concise tests.
• Ensure tests are isolated and do not rely on external dependencies.

Expected Behavior:

• The initial number displayed should be 0.
• Clicking "Increment" should increase the number by 1.
• Clicking "Decrement" should decrease the number by 1.
• The number should not go below 0 when decrementing.

Examples

Example 1:

Input: Initial state of Counter component
Output: The component displays "0"
Explanation: The Counter component should initialize with a count of 0.

Example 2:

Input: Click "Increment" button twice
Output: The component displays "2"
Explanation: Clicking "Increment" increases the count by 1. Two clicks result in a count of 2.

Example 3:

Input: Click "Decrement" button three times
Output: The component displays "0"
Explanation: Clicking "Decrement" decreases the count by 1. Three clicks result in a count of 0.  The counter should not go below 0.

Constraints

• You must use TypeScript.
• You must use react-testing-library and jest-dom.
• The Counter component is provided below. Do not modify the component itself.
• Tests should be written in a single test file.
• The component should not have a maximum value.

Notes

• Consider using waitFor from react-testing-library to handle asynchronous updates to the DOM.
• Think about how to structure your tests to make them readable and maintainable.
• Focus on testing the behavior of the component, not the implementation details.
• The Counter component is a functional component.

Counter Component (Provided):

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

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

  const decrement = () => {
    setCount(Math.max(0, count - 1));
  };

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

export default Counter;