Testen von React-Komponenten-Formularübermittlungen mit Jest Mock-Spies

import { render, screen, fireEvent } from '@testing-library/react';
 
function FeedbackForm({ onSubmitFeedback }) {
  const [comment, setComment] = React.useState('');
 
  const handleSubmit = (e) => {
    e.preventDefault();
    if (comment.trim().length > 0) {
      onSubmitFeedback({ text: comment, timestamp: Date.now() });
      setComment('');
    }
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        aria-label="comment-input"
        value={comment}
        onChange={(e) => setComment(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}
 
test('calls onSubmitFeedback callback with expected structure on submit', () => {
  const handleSubmitMock = jest.fn();
  render(<FeedbackForm onSubmitFeedback={handleSubmitMock} />);
 
  const input = screen.getByLabelText('comment-input');
  fireEvent.change(input, { target: { value: 'Great feature!' } });
  fireEvent.click(screen.getByRole('button', { name: /submit/i }));
 
  expect(handleSubmitMock).toHaveBeenCalledTimes(1);
  expect(handleSubmitMock).toHaveBeenCalledWith(
    expect.objectContaining({ text: 'Great feature!' })
  );
});