Simulate User Interactions with userEvent in Jest

Testing user interactions in web applications is crucial for ensuring a smooth and intuitive user experience. Jest's @testing-library/user-event library provides a convenient way to simulate these interactions at a higher level than fireEvent, mimicking how users actually interact with the DOM. This challenge will test your ability to use userEvent to simulate common user actions and verify their effects.

Problem Description

Your task is to write Jest tests for a simple React component that displays a counter and an input field. The component should have the following functionality:

• Increment Button: Clicking this button increases the counter by 1.
• Decrement Button: Clicking this button decreases the counter by 1.
• Input Field: Typing into this input field updates its value.
• Reset Button: Resets the counter to 0.

You will use @testing-library/user-event to simulate these user interactions and @testing-library/react to render your component and make assertions.

Key Requirements:

1. Render the component: Use render from @testing-library/react to mount your component in the test environment.
2. Simulate button clicks: Use userEvent.click() to simulate clicks on the increment, decrement, and reset buttons.
3. Simulate typing: Use userEvent.type() to simulate typing into the input field.
4. Verify state changes: After simulating interactions, assert that the component's state (counter value, input value) has been updated as expected.
5. Test initial state: Ensure the component renders with the correct initial state.

Expected Behavior:

• Initially, the counter should display '0'.
• Clicking the increment button should increase the counter's displayed value by 1.
• Clicking the decrement button should decrease the counter's displayed value by 1.
• Typing characters into the input field should update the input's displayed value.
• Clicking the reset button should set the counter's displayed value back to '0'.

Edge Cases:

• Decrementing below zero: While not strictly an edge case for the simulation itself, consider how your component might handle this. For this challenge, assume the counter can go into negative numbers.
• Typing in an empty input: Ensure userEvent.type handles an empty input correctly.

Examples

Let's assume you have a React component named CounterComponent with the described functionality.

Example 1: Initial Render and Increment

// Assume CounterComponent is defined elsewhere and imported
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import CounterComponent from './CounterComponent'; // Path to your component

test('should render with initial count of 0 and increment', async () => {
  render(<CounterComponent />);

  // Initial state assertion
  expect(screen.getByText('Count: 0')).toBeInTheDocument();

  // Simulate clicking the increment button
  const incrementButton = screen.getByRole('button', { name: /increment/i });
  await userEvent.click(incrementButton);

  // Assert that the count has updated
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

Example 2: Decrementing the Counter

// ... (previous imports and setup)

test('should decrement the counter', async () => {
  render(<CounterComponent />);

  // First, increment to have a value other than 0
  const incrementButton = screen.getByRole('button', { name: /increment/i });
  await userEvent.click(incrementButton);
  await userEvent.click(incrementButton); // Count is now 2

  // Simulate clicking the decrement button
  const decrementButton = screen.getByRole('button', { name: /decrement/i });
  await userEvent.click(decrementButton);

  // Assert that the count has updated
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

Example 3: Typing into the Input Field and Resetting

// ... (previous imports and setup)

test('should update input value and reset counter', async () => {
  render(<CounterComponent />);

  // Simulate typing into the input field
  const inputField = screen.getByRole('textbox');
  await userEvent.type(inputField, 'Hello, World!');

  // Assert the input value has updated
  expect(inputField).toHaveValue('Hello, World!');

  // Simulate clicking the reset button
  const resetButton = screen.getByRole('button', { name: /reset/i });
  await userEvent.click(resetButton);

  // Assert the counter has reset
  expect(screen.getByText('Count: 0')).toBeInTheDocument();
  // Assert the input field value remains unchanged after reset (if applicable to component design)
  // For this example, let's assume the input is *not* cleared by reset.
  expect(inputField).toHaveValue('Hello, World!');
});

Constraints

• Your solution should be written in TypeScript.
• You must use @testing-library/react for rendering and assertions.
• You must use @testing-library/user-event for simulating user interactions.
• Tests should be clear, readable, and follow best practices for Jest testing.
• Assume the CounterComponent is a functional component using React hooks (e.g., useState).

Notes

• Focus on userEvent: This challenge is primarily about practicing userEvent. While you need to create a simple component to test, the focus is on how you simulate the interactions.
• async/await: Remember that userEvent methods are asynchronous. Always use await when calling them.
• Accessibility: When selecting elements, prefer using accessible roles and labels (e.g., getByRole, getByLabelText) over brittle selectors like class names or data-testid, although getByText is acceptable for simple text elements.
• Component Implementation: You will need to create a basic CounterComponent.tsx that meets the requirements outlined in the "Problem Description" to run these tests against. This component itself is not the primary deliverable of the challenge, but it's necessary for a runnable solution.