Wie testest du die Nichtexistenz eines Elements mit einer Scherz- und Reaktionstestbibliothek?

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, getByTestIdUsw. throw und Fehler in , react-testing-librarywenn das Element nicht gefunden wird , um den Test zu verursachen , bevor die zum Scheitern verurteilt expectFunktion ausgelöst wird .

Wie testest du mit der React-Testing-Bibliothek auf etwas, das nicht im Scherz existiert?

Aus DOM-Testbibliotheksdokumenten - Aussehen und Verschwinden

Durchsetzungselemente sind nicht vorhanden

Die Standardmethoden geben getByeinen Fehler aus, wenn sie kein Element finden können. Wenn Sie also behaupten möchten, dass ein Element nicht im DOM vorhanden ist, können Sie queryBystattdessen APIs verwenden:

const submitButton = screen.queryByText('submit')
expect(submitButton).toBeNull() // it doesn't exist

Die queryAllAPI-Version gibt ein Array übereinstimmender Knoten zurück. Die Länge des Arrays kann für Zusicherungen nützlich sein, nachdem Elemente zum DOM hinzugefügt oder daraus entfernt wurden.

const submitButtons = screen.queryAllByText('submit')
expect(submitButtons).toHaveLength(2) // expect 2 elements

not.toBeInTheDocument

Die jest-domDienstprogrammbibliothek stellt den .toBeInTheDocument()Matcher bereit , mit dem festgestellt werden kann, ob sich ein Element im Hauptteil des Dokuments befindet oder nicht. Dies kann sinnvoller sein als die Behauptung eines Abfrageergebnisses null.

import '@testing-library/jest-dom/extend-expect'
// use `queryBy` to avoid throwing an error with `getBy`
const submitButton = screen.queryByText('submit')
expect(submitButton).not.toBeInTheDocument()

Verwenden Sie queryBy/ queryAllBy.

Wie Sie sagen, getBy*und getAllBy*werfen Sie einen Fehler, wenn nichts gefunden wird.

Jedoch ist die äquivalenten Verfahren queryBy*und queryAllBy*zurück statt nulloder []:

queryBy

queryBy*Abfragen geben den ersten übereinstimmenden Knoten für eine Abfrage zurück und geben zurück, nullwenn keine Elemente übereinstimmen. Dies ist nützlich, um ein Element zu bestätigen, das nicht vorhanden ist. Dies wird ausgelöst, wenn mehr als eine Übereinstimmung gefunden wird (verwenden Sie stattdessen queryAllBy).

queryAllBy- queryAllBy* Abfragen geben ein Array aller übereinstimmenden Knoten für eine Abfrage zurück und ein leeres Array ( []), wenn keine Elemente übereinstimmen.

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 queryByTextund verwenden queryByTestId, aber diese funktionieren für alle Abfragen, nicht nur für diese beiden.

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();
  });
});

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

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();
  });