5 TIPPS ZUM PERFEKTEN REACT TESTING BIBLIOTHEKSABFRAGEN

Meine Reise

Nachdem ich begonnen hatte, Komponenteninteraktionen mit Testing Library zu testen, wurde mir schnell klar, dass die schwierigste Aufgabe darin bestand, die richtigen DOM-Elemente abzurufen. Dies war der kritische Weg zum Testen. Wenn Sie das Ding, das Sie testen möchten, nicht abfragen können, können Sie es schließlich nicht testen! Das erste, was ich gelernt habe, war |_+_| und es deckte eine anständige Menge an Testfällen ab. Aber bald, als ich komplexere Komponenten testete, war es nicht gut genug. Durch all meine Prüfungen und Drangsale ist dies meine Abfragestrategie geworden.

Bildschirm-Debugging
Abfrage per Text
Abfrage nach Labeltext
Abfrage nach Rolle
Innerhalb

1. Bildschirm-Debugging

|_+_| . der Testbibliothek ist mein Werkzeug, um Anfragen zu stellen. Anstatt mir den Code anzusehen und mir vorzustellen, wie er auf dem DOM in meinem Kopf dargestellt wird, kann ich mit dem Logging-Tool der Testing Library sofort einen verschönerten DOM-Baum mit allen Elementattributen in der Konsole protokollieren. All dies visuell zu sehen, hilft mir, meine Abfragestrategie schnell zu formulieren. Standardmäßig wird |_+_| protokolliert.

getByText

|_+_| akzeptiert auch ein DOM-Element, um dieses Element speziell zu protokollieren. Dies ist nützlich, um schnell zu überprüfen, ob eine Abfrage wie erwartet funktioniert.

screen.debug

2. Abfrage per Text

Abfrage nach Text gibt ein Element basierend auf seinem Textinhalt zurück und ist bei weitem meine am häufigsten verwendete Abfrage. Es ist meine Standardabfragemethode, nicht nur weil sie einfach zu verstehen und zu verwenden ist, sondern auch, weil sie das tatsächliche Benutzerverhalten und die Interaktionen in Webanwendungen nachahmt.

document.body

3. Abfrage nach Labeltext

Abfrage nach Beschriftungstext gibt ein Element basierend auf einem zugeordneten Beschriftungselementtextinhalt oder |_+_| . zurück Attribut. Diese Abfragemethode hängt wirklich von der Implementierung ab, da sie eine verdeckte Zuordnung erfordert. Es findet ein Label-Element basierend auf seinem Textinhalt (ähnlich wie bei einer Textabfrage), findet das diesem Label zugeordnete Eingabeelement und gibt dieses Eingabeelement zurück. Diese Zuordnung kann entweder durch Verschachtelung erfolgen

import { render, screen } from '@testing-library/react'; test('screen debug default', () => { render( Secondary Primary ); screen.debug(); // output: // // // // // Secondary // // // Primary // // // // });

bis |_+_|

screen.debug

oder über |_+_|.

test('screen debug element', () => { render( Secondary Primary ); screen.debug(document.querySelector('.primary')); // output: // // Primary // });

Aufgrund dieser spezifischen Implementierungsanforderung ist die Verwendung etwas schwieriger. Aber der wahre Grund, warum dies meine zweite Abfragemethode ist, ist, dass diese auch basierend auf dem |_+_| . abfragen kann Attribut, das alles sein kann, was Sie wollen (natürlich im Rahmen des Zumutbaren). Dies erleichtert nicht nur die Abfrage zum Testen, sondern hilft auch bei der Barrierefreiheit.

import { render } from '@testing-library/react'; test('should return element based on its text', () => { const { getByText } = render(Button); expect(getByText('Button')).toMatchInlineSnapshot(` Button `); });

#reagieren #jest #testen #javascript #entwickler

medium.com