Testing User Interactions with Jest's userEvent

This challenge focuses on mastering the simulation of user interactions within a web application using Jest and its @testing-library/user-event library. Effectively testing how users interact with your UI is crucial for building robust and user-friendly applications. You will write tests that mimic real user actions like typing, clicking, and focusing to ensure your components behave as expected.

Problem Description

Your task is to write Jest tests for a simple React component that allows users to input text, submit it, and see a confirmation message. You will use the @testing-library/user-event library to simulate these user interactions programmatically.

Key Requirements:

1. Simulate Typing: The tests should simulate a user typing into an input field.
2. Simulate Clicking: The tests should simulate a user clicking a submit button.
3. Simulate Focus/Blur: (Optional, but encouraged) Test how the component reacts to an input field gaining and losing focus.
4. Assertions: Assert that the correct elements are rendered and updated based on user actions.

Expected Behavior:

• Initially, an input field and a submit button are visible.
• When a user types into the input field, the input's value should update.
• When a user clicks the submit button (after typing something), a confirmation message should appear, displaying the submitted text.
• If the submit button is clicked without any text in the input, no confirmation message should appear (or an appropriate alternative behavior if defined).

Edge Cases to Consider:

• What happens if the user clears the input field after typing?
• What happens if the user clicks the submit button multiple times?

Examples

Example 1: Basic Input and Submission

// Assume a component renders an input and a button.
// When text is typed into the input and the button is clicked,
// a h2 element appears with the submitted text.

// Initial state:
// <input type="text" />
// <button>Submit</button>

// After typing "Hello World" and clicking submit:
// <input type="text" value="Hello World" />
// <button>Submit</button>
// <h2>Hello World</h2>

Input to the test:

• Simulate typing "Hello World" into the input.
• Simulate clicking the submit button.

Expected Output (within the test):

• The input field's value should be "Hello World".
• A h2 element with the text content "Hello World" should be present in the DOM.

Explanation: This test verifies the core functionality of typing and submitting.

Example 2: Submitting Empty Input

// Assume the same component as Example 1.

// Initial state:
// <input type="text" />
// <button>Submit</button>

// After clicking submit with an empty input:
// <input type="text" value="" />
// <button>Submit</button>
// (No h2 element appears)

Input to the test:

• Ensure the input is initially empty.
• Simulate clicking the submit button.

Expected Output (within the test):

• No h2 element with submitted text should be present in the DOM.

Explanation: This test ensures that submitting an empty field doesn't lead to unexpected output.

Example 3: Typing and Clearing

// Assume the same component as Example 1.

// Initial state:
// <input type="text" />
// <button>Submit</button>

// After typing "Partial Text", then clearing it, then submitting:
// <input type="text" value="" />
// <button>Submit</button>
// (No h2 element appears)

Input to the test:

• Simulate typing "Partial Text" into the input.
• Simulate clearing the input (e.g., by typing backspace characters).
• Simulate clicking the submit button.

Expected Output (within the test):

• The input field's value should be "".
• No h2 element with submitted text should be present in the DOM.

Explanation: This tests the scenario where user input is modified before submission.

Constraints

• Your solution must use Jest and @testing-library/user-event.
• The tests should be written in TypeScript.
• Focus on clear and descriptive test names.
• Tests should be asynchronous due to the nature of userEvent.

Notes

• You will likely need to set up a basic React testing environment if you don't have one already.
• The @testing-library/react library is essential for rendering your React components within Jest.
• Pay attention to the await keyword when using userEvent functions.
• Consider using screen.getByRole, screen.getByLabelText, or screen.getByPlaceholderText for robust element selection.