Wie testet man mit Jest und React-Testing-Library die Nichtexistenz eines Elements?

Ich habe eine Komponentenbibliothek, in der ich Komponententests für die Verwendung von Jest und der React-Testing-Bibliothek schreibe. Basierend auf bestimmten Requisiten oder Ereignissen möchte ich überprüfen, ob bestimmte Elemente nicht gerendert werden.

getByText, getByTestIdusw. werfen und Fehler einwerfen react-testing-library Wenn das Element nicht gefunden wird, schlägt der Test vor dem fehl expect Funktion wird ausgelöst.

Wie testet man mit der React-Testing-Library auf etwas, das im Scherz nicht existiert?

Aus DOM Testing-Bibliotheksdokumente – Erscheinen und Verschwinden

Behauptende Elemente sind nicht vorhanden

Der Standard getBy Methoden geben einen Fehler aus, wenn sie ein Element nicht finden können, also wenn Sie eine Behauptung aufstellen möchten, dass ein Element vorhanden ist nicht im DOM vorhanden ist, können Sie verwenden queryBy APIs stattdessen:

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

Der queryAll Die API-Version gibt ein Array übereinstimmender Knoten zurück. Die Länge des Arrays kann für Behauptungen 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

Der jest-dom Die Dienstprogrammbibliothek bietet die
.toBeInTheDocument() Matcher, der verwendet werden kann, um sicherzustellen, dass sich ein Element im Hauptteil des Dokuments befindet oder nicht. Dies kann aussagekräftiger sein als die Bestätigung 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 queryBy / queryAllBy.

Wie du sagst, getBy* Und getAllBy* Gibt einen Fehler aus, wenn nichts gefunden wird.

Allerdings sind die entsprechenden Methoden queryBy* Und queryAllBy* stattdessen zurückkehren null oder []:

queryBy

queryBy* Abfragen geben den ersten passenden Knoten für eine Abfrage zurück und geben zurück null wenn 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 und ein leeres Array zurück ([]), wenn keine Elemente übereinstimmen.

https://testing-library.com/docs/dom-testing-library/api-queries#queryby

Für die beiden, die Sie erwähnt haben, würden Sie also stattdessen verwenden queryByText Und queryByTestIdaber diese funktionieren für alle Abfragen, nicht nur für diese beiden.

getBy* gibt einen Fehler aus, wenn kein Element gefunden wird, sodass Sie dies überprüfen können

expect(() => getByText('your text')).toThrow('Unable to find an element');

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

expect(submitButton).not.toBeNull() // it exist

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

Hat für mich geklappt (wenn Sie getByTestId verwenden möchten):

expect(() => getByTestId('time-label')).toThrow()

Ich hoffe, das wird hilfreich sein

Diese Tabelle zeigt, warum/wann Funktionsfehler auftreten

welche Funktionen asynchron sind

Was ist eine Return-Anweisung für eine Funktion?