web-dev-qa-db-fra.com

Comment testez-vous la non-existence d'un élément en utilisant jest et react-testing-library?

J'écris des tests unitaires dans une bibliothèque de composants pour l'utilisation de Jest et de la bibliothèque react-testing. En fonction de certains accessoires ou événements, je souhaite vérifier que certains éléments ne sont pas rendus.

getByText, getByTestId, etc projection et erreur dans react-testing-library si l'élément n'est pas trouvé, le test échouant avant le déclenchement de la fonction expect.

Comment tester quelque chose qui n'existe pas en plaisanterie en utilisant react-testing-library?

reactjsjestjsreact-testing-library
28
SomethingOn

From Docs de la librairie de test DOM - Apparence et disparition

Et si je veux vérifier qu'un élément n'existe pas?

Vous aurez généralement accès aux éléments rendus à l'aide de l'utilitaire getByTestId. Cependant, cette fonction générera une erreur si l'élément n'est pas trouvé. Si vous souhaitez tester spécifiquement l'absence d'un élément, vous devez utiliser l'utilitaire queryByTestId qui renverra l'élément s'il est trouvé ou la valeur null si ce n'est pas le cas.

expect(queryByTestId('thing-that-does-not-exist')).toBeNull()
59
kentcdodds

Vous devez utiliser queryByTestId au lieu de getByTestId.

Voici un exemple de code où je veux tester si le composant avec "car" id n'existe pas.

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