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

Question

J'ai une bibliothèque de composants pour laquelle j'écris des tests unitaires en utilisant Jest et react-testing-library. Sur la base de certains props ou événements, je veux vérifier que certains éléments ne sont pas rendus.

getByText , getByTestId etc. et une erreur dans react-testing-library si l'élément n'est pas trouvé, ce qui fait que le test échoue avant que l'élément ne soit trouvé. expect la fonction se déclenche.

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

Answer 1

De Docs DOM Testing-library - Apparition et disparition

Affirmer que les éléments ne sont pas présents

La norme getBy lancent une erreur lorsqu'elles ne parviennent pas à trouver un élément. donc, si vous voulez affirmer qu'un élément est pas présents dans le DOM, vous pouvez utiliser queryBy à la place :

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

Le site queryAll La version API renvoie un tableau de nœuds correspondants. La longueur de la peut être utile pour les assertions après l'ajout ou la suppression d'éléments dans le DOM.

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

not.toBeInTheDocument

Le site jest-dom fournit la bibliothèque utilitaire .toBeInTheDocument() matcher, qui peut être utilisé pour affirmer qu'un élément se trouve dans le corps du document, ou non. Cela peut être plus significatif que d'affirmer que qu'un résultat de requête est 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()

Answer 2

Utilisez queryBy / queryAllBy .

Comme vous le dites, getBy* et getAllBy* lance une erreur si rien n'est trouvé.

Cependant, les méthodes équivalentes queryBy* et queryAllBy* au lieu de cela, retournez null ou [] :

queryBy

queryBy* les requêtes renvoient le premier nœud correspondant à une requête, et renvoient null si aucun élément ne correspond. Ceci est utile pour affirmer un élément qui n'est pas présent. Cette fonction est rejetée si plus d'un élément est trouvé (utilisez queryAllBy à la place).

queryAllBy queryAllBy* renvoient un tableau de tous les nœuds correspondants à une requête, et renvoient un tableau vide ( [] ) si aucun élément ne correspond.

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

Donc, pour les deux que vous avez mentionnés, vous utiliseriez plutôt queryByText et queryByTestId mais elles fonctionnent pour toutes les requêtes, pas seulement pour ces deux-là.

Answer 3

GetBy* génère une erreur lorsqu'il ne trouve pas d'éléments, vous pouvez donc vérifier cela.

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

Answer 4

Vous devez utiliser queryByTestId au lieu de getByTestId.

Voici un exemple de code où je veux tester si le composant avec l'id "voiture" 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();
  });
});

Answer 5

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

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