Jest Form Testing: User Registration Simulation

This challenge focuses on simulating user interactions with a form and testing these interactions using Jest. You will create a basic form component and write Jest tests to verify its functionality, including input changes, submission, and validation. This is a fundamental skill for building robust and user-friendly web applications.

Problem Description

Your task is to create a simple user registration form component and then write comprehensive Jest tests for it. The form should include fields for username, email, and password. The tests should cover the following:

• Input Field Updates: Verify that typing into input fields correctly updates the component's state.
• Form Submission: Ensure that when the form is submitted, the correct data is captured and processed.
• Basic Validation: Implement simple validation rules (e.g., required fields, valid email format) and test that they work as expected, displaying appropriate error messages.
• Error Message Display: Confirm that error messages are displayed when validation fails and disappear when the input is corrected.

Examples

Example 1: Valid Form Submission

Let's assume a component that renders a form.

• Input:
  • User types "john_doe" into the username field.
  • User types "john.doe@example.com" into the email field.
  • User types "SecureP@ssw0rd" into the password field.
  • User clicks the submit button.
• Output:
  • The onSubmit handler is called exactly once.
  • The data passed to onSubmit is an object: { username: "john_doe", email: "john.doe@example.com", password: "SecureP@ssw0rd" }.
  • No error messages are displayed on the screen.

Example 2: Submission with Missing Fields

• Input:
  • User leaves the username and email fields empty.
  • User types "123456" into the password field.
  • User clicks the submit button.
• Output:
  • The onSubmit handler is NOT called.
  • An error message "Username is required" is displayed below the username input.
  • An error message "Email is required" is displayed below the email input.
  • No error message for the password field.

Example 3: Invalid Email Format

• Input:
  • User types "jane_doe" into the username field.
  • User types "jane.doe.example.com" (missing '@') into the email field.
  • User types "AnotherP@ss" into the password field.
  • User clicks the submit button.
• Output:
  • The onSubmit handler is NOT called.
  • No error message for the username field.
  • An error message "Invalid email format" is displayed below the email input.
  • No error message for the password field.

Constraints

• Your form component should have three input fields: username, email, and password.
• The email field should validate for a basic email format (e.g., containing an "@" symbol).
• All fields (username, email, password) are required.
• You will be using Jest for testing. Assume you have a testing environment set up with @testing-library/react and @testing-library/jest-dom.
• The component should accept an onSubmit prop which is a function that will be called with the form data upon successful submission.

Notes

• You can create a simple React component for the form. The focus is on the testing aspect, so the component itself can be basic.
• Think about how you would simulate user interactions like typing and clicking using @testing-library/react.
• Consider how to query for elements (inputs, error messages, submit button) and assert their properties or visibility.
• For email validation, a simple regex or just checking for the presence of "@" and "." is sufficient for this challenge.
• When testing, focus on one aspect at a time to make your tests clear and maintainable.