Mastering React Component Testing with Jest and React Testing Library

This challenge focuses on writing robust and maintainable tests for React components using Jest and React Testing Library. You'll learn how to simulate user interactions, query the DOM for elements, and assert component behavior, leading to more reliable and user-centric applications.

Problem Description

Your task is to create a set of tests for a simple Counter React component. This component will have:

1. A display to show the current count.
2. A button to increment the count.
3. A button to decrement the count.
4. An initial count value that can be passed as a prop.

You need to write tests that verify the following behaviors:

• The component renders with the correct initial count.
• Clicking the "Increment" button increases the count by 1.
• Clicking the "Decrement" button decreases the count by 1.
• The count does not go below zero when the "Decrement" button is clicked repeatedly from zero.

Key Requirements:

• Use react-testing-library for querying and interacting with the DOM.
• Use jest as the testing framework.
• Write tests in TypeScript.
• Ensure tests are descriptive and follow best practices.
• The Counter component itself can be a simple functional component.

Expected Behavior:

• When the component mounts with an initial count of 5, the display should show "Count: 5".
• After clicking "Increment" twice, the display should show "Count: 7".
• After clicking "Decrement" once from a count of 3, the display should show "Count: 2".
• If the count is 0 and "Decrement" is clicked, the display should remain "Count: 0".

Edge Cases:

• Consider the scenario where no initial count is provided (it should default to 0).

Examples

Example 1: Initial Render and Increment

Input (Component state): initialCount = 3
Input (User action): Click the "Increment" button twice.

Output (Component display): "Count: 5"
Explanation: The component starts with a count of 3. After clicking "Increment" twice, the count becomes 3 + 1 + 1 = 5.

Example 2: Decrement and Minimum Value

Input (Component state): initialCount = 1
Input (User action): Click the "Decrement" button twice.

Output (Component display): "Count: 0"
Explanation: The component starts with a count of 1. Clicking "Decrement" once makes it 0. Clicking "Decrement" again when the count is 0 keeps it at 0.

Example 3: No Initial Count Provided

Input (Component state): No initialCount prop provided.
Input (User action): Click the "Increment" button once.

Output (Component display): "Count: 1"
Explanation: If no initialCount is provided, the component defaults to a count of 0. Clicking "Increment" once changes it to 1.

Constraints

• Your tests should execute within a reasonable time frame (e.g., under 1 second for all tests).
• The Counter component should be a standard React functional component.
• Use idiomatic react-testing-library queries (e.g., getByText, getByRole).

Notes

• Remember to import necessary functions from react and react-testing-library.
• You'll need to set up a basic Jest and React Testing Library environment if you haven't already.
• Focus on testing the user experience rather than implementation details. Query for elements as a user would see them (e.g., by their text content or accessible roles).
• Think about how to simulate button clicks using fireEvent or userEvent from react-testing-library.