Snippet

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

Das Unit-Testen interaktiver Formularkomponenten erfordert die Überprüfung, ob Event-Handler Benutzereingaben korrekt verarbeiten und Daten über Callback-Props übergeben. Jest-Mock-Funktionen (`jest.fn()`) fungieren als Spies, um Aufrufzahlen und Parameter aufzuzeichnen. `expect.objectContaining()` ermöglicht es, bestimmte Nutzdaten-Eigenschaften zu prüfen, während nicht-deterministische Werte wie Zeitstempel toleriert werden.

snippet.js

javascript

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!' })
  );
});

react

Erklärung

const handleSubmitMock = jest.fn();

Erzeugt eine Mock-Spy-Funktion, um Aufrufe und übergebene Argumente der Callback-Funktion zu protokollieren.

fireEvent.change(input, { target: { value: 'Great feature!' } });

Simuliert die Eingabe eines Nutzers in das gesteuerte Formularfeld.

expect(handleSubmitMock).toHaveBeenCalledWith(expect.objectContaining({ text: 'Great feature!' }));

Prüft, ob der Mock mit einem Objekt aufgerufen wurde, das den erwarteten Text enthält.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

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

Verwandt