Testing React Forms with Jest and React Testing Library

Form testing is a crucial aspect of ensuring the reliability and usability of web applications. This challenge focuses on implementing robust form testing using Jest and React Testing Library, allowing you to verify user input, form submission, and overall form behavior. You'll be testing a simple React form component, ensuring it handles user interactions and data correctly.

Problem Description

You are tasked with writing Jest tests for a React form component. The component, SimpleForm, allows users to enter their name and email address and submit the form. Your tests should verify the following:

1. Initial State: The form should initially render with empty input fields.
2. Input Changes: Typing into the input fields should update the component's state correctly.
3. Submission: Clicking the submit button should trigger a onSubmit prop function with the form data.
4. Error Handling (Basic): The component doesn't have built-in validation, but you should verify that the onSubmit function receives the data entered, regardless of its validity. (More complex validation testing is beyond the scope of this challenge).
5. Accessibility: Ensure the form elements have appropriate labels associated with them.

Key Requirements:

• Use Jest and React Testing Library for testing.
• Write at least 5 tests covering the points mentioned above.
• Focus on testing the component's behavior, not the internal implementation details.
• Assume the SimpleForm component is already defined (see provided code below).

Expected Behavior:

The tests should pass when the SimpleForm component functions as described above. Failures indicate issues with the component's rendering, state management, or event handling.

Examples

Example 1:

Input: Initial render of SimpleForm
Output: Two input fields (name and email) are present and empty.
Explanation: This verifies the form renders correctly with the expected initial state.

Example 2:

Input: User types "John Doe" into the name field and "john.doe@example.com" into the email field, then clicks submit.
Output: The onSubmit prop function is called with an object { name: "John Doe", email: "john.doe@example.com" }.
Explanation: This verifies that the form data is correctly captured and passed to the onSubmit handler.

Example 3:

Input: Initial render of SimpleForm
Output: The name input field has a label associated with it that reads "Name".
Explanation: This verifies basic accessibility by ensuring labels are present.

Constraints

• You must use React Testing Library's screen object for querying elements.
• The SimpleForm component is provided below and should not be modified.
• Tests should be written in TypeScript.
• Focus on testing the component's public API (props and behavior) rather than internal implementation details.

Notes

• Consider using fireEvent from React Testing Library to simulate user interactions like typing and clicking.
• Use waitFor if asynchronous operations are involved (though this example doesn't require it).
• Think about how to mock the onSubmit prop function to verify it's called correctly.
• The provided SimpleForm component uses functional components and hooks.

Provided SimpleForm Component:

import React, { useState } from 'react';

interface SimpleFormProps {
  onSubmit: (data: { name: string; email: string }) => void;
}

const SimpleForm: React.FC<SimpleFormProps> = ({ onSubmit }) => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    onSubmit({ name, email });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default SimpleForm;