Ich habe eine Komponentenbibliothek, in der ich Unit-Tests für die Verwendung von Jest und React-Testing-Library schreibe. Basierend auf bestimmten Requisiten oder Ereignissen möchte ich überprüfen, ob bestimmte Elemente nicht gerendert werden.
getByText
, getByTestId
Usw. throw und Fehler in , react-testing-library
wenn das Element nicht gefunden wird , um den Test zu verursachen , bevor die zum Scheitern verurteilt expect
Funktion ausgelöst wird .
Wie testest du mit der React-Testing-Bibliothek auf etwas, das nicht im Scherz existiert?
quelle
getByTestId
habe den gleichen Fehler verwendet und bekommen. Und ich habe die FAQ leider nicht überprüft. Tolle Bibliothek! Können Sie Ihre Antwort so ändern, dass sie `.toBeNull () enthält?queryByText
für diejenigen, die das Äquivalent dazu wollengetByText
, ist null sicherVerwenden Sie
queryBy
/queryAllBy
.Wie Sie sagen,
getBy*
undgetAllBy*
werfen Sie einen Fehler, wenn nichts gefunden wird.Jedoch ist die äquivalenten Verfahren
queryBy*
undqueryAllBy*
zurück stattnull
oder[]
:https://testing-library.com/docs/dom-testing-library/api-queries#queryby
Für die beiden spezifischen, die Sie erwähnt haben, würden Sie stattdessen
queryByText
und verwendenqueryByTestId
, aber diese funktionieren für alle Abfragen, nicht nur für diese beiden.quelle
queryByTestId
), obwohl es tatsächlich zwei ganze Sätze von Methoden gibt, von denenqueryByTestId
ein spezifisches Beispiel ist.Sie müssen queryByTestId anstelle von getByTestId verwenden.
Hier ein Codebeispiel, in dem ich testen möchte, ob die Komponente mit der ID "Auto" nicht vorhanden ist.
describe('And there is no car', () => { it('Should not display car mark', () => { const props = { ...defaultProps, base: null, } const { queryByTestId } = render( <IntlProvider locale="fr" messages={fr}> <CarContainer{...props} /> </IntlProvider>, ); expect(queryByTestId(/car/)).toBeNull(); }); });
quelle
getBy * gibt einen Fehler aus, wenn keine Elemente gefunden werden, sodass Sie dies überprüfen können
expect(() => getByText('your text')).toThrow('Unable to find an element');
quelle
Sie können die reaktionsnative Testbibliothek "getAllByType" verwenden und dann überprüfen, ob die Komponente null ist. Hat den Vorteil, dass TestID nicht eingestellt werden muss, sollte auch mit Komponenten von Drittanbietern funktionieren
it('should contain Customer component', () => { const component = render(<Details/>); const customerComponent = component.getAllByType(Customer); expect(customerComponent).not.toBeNull(); });
quelle