Testing User Interactions with Jest and React

Interaction tests are crucial for verifying that your React components behave as expected when users interact with them. This challenge focuses on writing Jest tests that simulate user actions like clicks, form submissions, and changes, ensuring your application responds correctly. Successfully completing this challenge demonstrates a solid understanding of Jest's testing utilities and how to effectively test user interface components.

Problem Description

You are tasked with creating interaction tests for a simple React component called Counter. The Counter component displays a count and has two buttons: "Increment" and "Decrement". Clicking "Increment" should increase the count by 1, and clicking "Decrement" should decrease it by 1. The component also has an input field where the user can type a number. A "Reset" button clears the input and sets the counter to the value entered in the input field.

Your goal is to write Jest tests using user-event (a Jest utility for simulating user interactions) to verify the following:

1. Clicking the "Increment" button increases the count by 1.
2. Clicking the "Decrement" button decreases the count by 1.
3. Typing a number into the input field and clicking "Reset" sets the counter to that number.
4. The component initially renders with a count of 0.

You'll need to render the Counter component, simulate user interactions, and assert that the component's state changes as expected.

Examples

Example 1:

Input: Initial state: count = 0. User clicks "Increment" button.
Output: count = 1
Explanation: The "Increment" button click should increase the counter by 1.

Example 2:

Input: Initial state: count = 5. User clicks "Decrement" button.
Output: count = 4
Explanation: The "Decrement" button click should decrease the counter by 1.

Example 3:

Input: Initial state: count = 0. Input field contains "10". User clicks "Reset" button.
Output: count = 10
Explanation: The "Reset" button should set the counter to the value in the input field.

Constraints

• You must use user-event for simulating user interactions.
• The tests should be written in TypeScript.
• The Counter component is provided below. Do not modify the component itself.
• The tests should be robust and handle potential edge cases (e.g., negative numbers in the input field). While negative numbers aren't explicitly tested, the code should not crash if they are entered.
• The tests should be readable and well-documented.

Notes

• You'll need to install user-event: npm install --save-dev @testing-library/user-event
• Consider using screen from @testing-library/react to query the component's elements.
• Think about how to best structure your tests to ensure they are concise and maintainable.
• Focus on testing the behavior of the component, not just its appearance.

import React, { useState } from 'react';

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

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

  const decrement = () => {
    setCount(count - 1);
  };

  const reset = () => {
    setCount(parseInt(inputValue) || 0);
    setInputValue('');
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <input
        type="number"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default Counter;