Testing React Component Interactions with Jest and React Testing Library

This challenge focuses on writing an integration test for a React component that interacts with another component. Integration tests verify that multiple components work together correctly, simulating user interactions and ensuring data flows as expected. This is crucial for catching issues that unit tests might miss, particularly those related to prop passing and event handling.

Problem Description

You are tasked with creating an integration test for a simple React application consisting of two components: Button and Counter. The Counter component displays a count and increments it when a button is clicked. The Button component is responsible for triggering the increment action in the Counter component.

What needs to be achieved:

Write a Jest test using React Testing Library that verifies that clicking the Button component correctly increments the count displayed by the Counter component.

Key Requirements:

• Use React Testing Library for rendering and interacting with the components.
• The test should simulate a click event on the Button.
• The test should assert that the count displayed by the Counter component increases by one after the click.
• The test should handle asynchronous updates (e.g., state updates) correctly.

Expected Behavior:

The test should start with the Counter displaying an initial count (e.g., 0). After simulating a click on the Button, the test should verify that the Counter's displayed count is updated to 1.

Edge Cases to Consider:

• Ensure the test waits for the state update to complete before asserting the count. React Testing Library's waitFor or findByText can be helpful here.
• Consider how the Button component communicates with the Counter component (e.g., via props).

Examples

Example 1:

Input: Initial Counter count: 0, Button click event.
Output: Counter displays count: 1
Explanation: Clicking the button triggers the increment function in the Counter, updating the state and re-rendering the component to display the new count.

Example 2:

Input: Initial Counter count: 5, Button click event.
Output: Counter displays count: 6
Explanation: The button click increments the counter from 5 to 6.

Constraints

• You must use Jest and React Testing Library.
• The solution should be written in TypeScript.
• The components Button and Counter are provided below. Do not modify these components.
• The test should be reasonably performant; avoid unnecessary delays or complex setup.

Notes

• Think about how to reliably wait for the state update in the Counter component before making assertions.
• React Testing Library provides utilities for simulating user interactions and querying the rendered DOM. Familiarize yourself with these utilities.
• Consider using waitFor or findByText to handle asynchronous updates.
• The provided components are functional components.

// Counter.tsx
import React, { useState } from 'react';

interface CounterProps {
  onIncrement: () => void;
}

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

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

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

export default Counter;

// Button.tsx
import React from 'react';

interface ButtonProps {
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ onClick }) => {
  return <button onClick={onClick}>Click Me</button>;
};

export default Button;