Testen Sie, was Benutzer sehen und tun, und nicht die interne Implementierung. 2. Verwenden Sie die richtigen Abfragemethoden wie Getbyrole und GetBylabeltext, um die Abh?ngigkeit von DOM -Strukturen zu vermeiden. 3.. Verwenden Sie FindBy oder Wait für die Behandlung asynchrones Verhaltens, um stabile Tests sicherzustellen. 4.. Verspottete externe Abh?ngigkeiten wie Abruf und Timer, um schnelle und vorhersehbare Tests zu gew?hrleisten; 5. überschreiben von Kantenf?llen wie Laden, Fehlern, leeren Zust?nden usw.; 6. Halten Sie den Test unabh?ngig und pr?zise, jeder Test konzentriert sich auf ein einzelnes Verhalten und verwenden Sie die Renderwrapper korrekt. Durch die Simulation realer Benutzerinteraktionen hilft Ihnen die React -Testbibliothek, vertrauenswürdige, leicht zu verwaltende und belastbare UI -Tests aufzubauen, wodurch die Qualit?t w?hrend des Refactoring und der tats?chlichen Verwendung kontinuierlich gew?hrleistet wird.

Sie müssen nicht jede Codezeile in Ihrer Benutzeroberfl?che testen - Sie müssen testen, wie Benutzer tats?chlich damit interagieren. Hier leuchtet die React Testing Library (RTL) . Es f?rdert das Testverhalten gegenüber der Implementierung und hilft Ihnen dabei, eine selbstbewusste, widerstandsf?hige Benutzeroberfl?che aufzubauen, die den Refaktoren und der realen Nutzung standhalten.

Hier ist ein praktischer Leitfaden zur effektiven Verwendung der React -Testbibliothek, ohne Dinge zu überkomplizieren.

1. Testen Sie, was Benutzer sehen und tun

RTL basiert auf dem Prinzip: ?Testbenutzerverhalten, keine Implementierungsdetails.“ Vermeiden Sie den internen Zustand, Requisiten oder Komponentenverfahren direkt. Konzentrieren Sie sich stattdessen auf das, was der Benutzer erlebt.

? Tun Sie das:

 test ('Erfolgsnachricht, wenn Anmelderfolge', () => {
  render (<login />);

  fireEvent.change (screen.getByLabeltext (/E -Mail/i), {{
    Ziel: {value: &#39;user@example.com&#39;},
  });
  fireEvent.change (screen.getBylabeltext (/password/i), {{
    Ziel: {value: &#39;Passwort123&#39;}});
  fireEvent.click (screen.getByrole (&#39;button&#39;, {name: /log in /i}));

  erwarten (screen.getByText (/Welcome Back/i)). toBeinThedocument ();
});

? Nicht das:

 // Tun Sie dies nicht - es wird die Implementierung getestet
erwarten (component.state ('isloggedin')). tobe (true);

Durch Abfragen über screen.getByRole , getByLabelText oder getByText spiegeln Sie, wie Benutzer Ihre App navigieren - mit Augen und Interaktionen.

2. Verwenden Sie die richtigen Abfragen (und vermeiden Sie container ).

RTL gibt Ihnen eine vorrangige Reihenfolge für Fragen . Halten Sie sich nach M?glichkeit an die oberen:

• ? getByRole (mit name oder hidden )
• ? getByLabelText (ideal für Formen)
• ? getByText (für statische Inhalte)
• ? getByPlaceholderText (sparsam, da Platzhalter nicht immer sichtbar sind)
• ? container.querySelector vermeiden.

Beispiel mit getByRole :

 test ('Schaltfl?che Senden ist beim Laden deaktiviert', () => {
  render (<Kasseform />);

  const button = screen.getByrole (&#39;button&#39;, {name: /subieren /i});
  erwarten (Taste) .not.TobediSabled ();

  act (() => {
    fireEvent.click (button);
  });

  erwarten (Taste) .ToBediabled ();
  erwarten (screen.getByText (/processing/i)). toBeinThedocument ();
});

getByRole richtet sich an die Barrierefreiheit, sodass Sie auch die Benutzerfreundlichkeit der Bildschirmleser testen.

3.. Behandeln Sie das asynchrones Verhalten anmutig

Moderne UIS sind asynchron. Verwenden Sie waitFor , findBy oder waitforElementToBeRemoved anstelle von setTimeout -Hacks.

Verwenden Sie findBy wenn Sie erwarten, dass etwas erscheint:

 test ('Zeigt das Benutzerprofil nach dem Laden an “, async () => {
  render (<userProfile userID = "123" />);

  erwarten (screen.getByText (/laden/i)). toBeinThedocument ();

  const name = act screen.findByText (/John doe/i);
  erwarten (name) .tobeinthedocument ();
});

Warten Sie auf staatliche ?nderungen:

 test ('Fehlermeldung erscheint auf fehlgeschlagenem Fetch', async () => {
  // verspottete API, um zu scheitern
  jest.spyon (global, 'fetch'). MockRejejecedValueOnce (neuer Fehler ('API fehlgeschlagen'));

  Render (<Datenfetcher />);

  Warten Sie auf Waitfor (() => {
    erwarten (screen.getByText (/fehlgeschlagen/i)). toBeinThedocument ();
  });
});

Dies h?lt Ihre Tests stabil und lesbar.

4. Schein externe Abh?ngigkeiten mit Bedacht

Vermeiden Sie es, Tests auf echte APIs zu treffen oder verwenden Sie echte Times.

Mock Abret:

 vorab (() => {
  global.fetch = jest.fn ();
});

test ('Anrufe API auf Schaltfl?che Klicken', async () => {
  global.fetch.mockresolvedValueonce ({{{{
    OK: Richtig,
    JSON: () => Promise.resolve ({id: 1, Name: 'test'}),
  });

  Render (<Dataloader />);
  fireEvent.click (screen.getByrole (&#39;button&#39;, {name: /ladendaten /i}));

  erwarten (erwarten screen.findByText (/test/i)). toBeinThedocument ();
});

Verwenden Sie gef?lschte Zeiten für Downounce/Gas:

 jest.usefaketimers ();

test ('Search Debounces Input', () => {
  render (<Searchbox />);
  const input = screen.getByrole (&#39;SearchBox&#39;);

  fireEvent.change (Eingabe, {Ziel: {value: &#39;react&#39;}});
  jest.advancetimersbytime (200);

  erwarten (global.fetch) .not.tohaveBeencalled ();

  jest.advancetimersbytime (300); // insgesamt 500 ms
  erwarten (global.fetch). TOHAVEBEENCALLED ();
});

Dies macht Tests schnell und vorhersehbar.

5. Testkantenf?lle und Fehlerzust?nde

Es ist verlockend, nur den glücklichen Weg zu testen. Aber Insekten leben in den Ecken.

Prüfen:

• Ladezust?nde
• Fehlerzust?nde
• Leere Zust?nde
• Deaktivierte Schaltfl?chen
• Formularvalidierung

Beispiel:

 test ('Fehler anzeigt, wenn die E -Mail ungültig ist', () => {
  Render (<SignupForm />);
  const Emailinput = screen.getBYlabeltext (/E -Mail/i);
  const subieren = screen.getByrole (&#39;button&#39;, {name: /mail up /i});

  fireEvent.change (E-Mail-INPUT, {Ziel: {value: &#39;Not-an-email&#39;}});
  fireEvent.click (subine);

  erwarten (screen.getByText (/Bitte geben Sie eine gültige E -Mail ein/i)). toBeinThedocument ();
});

Diese Tests schützen Ihre UX, wenn die Dinge schief gehen.

6. Halten Sie die Tests isoliert und einfach

Jeder Test sollte:

• Ein Verhalten abdecken
• Geben Sie nur das ein, was ben?tigt wird
• Danach aufr?umen (RTL macht dies automatisch mit cleanup )

Verwenden Sie bei Bedarf render mit benutzerdefinierten Wrappern (z. B. für Kontextanbieter):

 const renderwithProviders = (ui, {ProviderProps, ... Optionen} = {}) => {
  Return Render (
    <UserProvider {... ProviderProps}>
      {ui}
    </UserProvider>,
    Optionen
  );
};

test (&#39;Benutzername wird angezeigt&#39;, () => {
  renderWithProviders (<Dashboard />, {
    ProviderProps: {Benutzer: {Name: &#39;Alice&#39;}}
  });

  erwarten (screen.getByText (/alice/i)). toBeinThedocument ();
});

Dies h?lt Tests sauber, ohne die Realit?t zu beeintr?chtigen.

Schreiben Sie im Grunde genommen nur Tests wie ein Benutzer, wie Sie Ihre App erleben würden. Sehen Sie sich darauf an, klicken Sie auf das, erwarten Sie dieses Ergebnis. Keine tiefen Tauchg?nge in den Staat, keine spr?den Selektoren.

React Testing Library funktioniert am besten, wenn Sie darauf vertrauen, dass sie Elemente wie eine Person finden , und Sie konzentrieren sich auf Ergebnisse und nicht auf Mechanik .

Mit diesen Praktiken fangen Sie echte Fehler, überleben Reflektoren und Schiffe, denen Sie tats?chlich vertrauen.

Das obige ist der detaillierte Inhalt vonReact Testing Library: Ein praktischer Leitfaden für eine selbstbewusste Benutzeroberfl?che. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!