Requêtes personnalisées

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

DOM Testing Library expose de nombreuses fonctions utilitaires utilisées pour implémenter les requêtes par défaut. Vous pouvez utiliser ces helpers pour créer des requêtes personnalisées. Par exemple, le code ci-dessous montre comment remplacer les requêtes testId par défaut pour utiliser un attribut data différent. (Note : les fichiers de tests importeraient test-utils.js plutôt que d'utiliser directement DOM Testing Library).

Note

Les requêtes personnalisées peuvent être ajoutées à la méthode render de React Testing Library en incluant queries dans l'objet de configuration options. Consultez les options de render.

Les requêtes personnalisées sont différentes des méthodes de rendu personnalisé.

test-utils.js

const domTestingLib = require('@testing-library/dom')
const {queryHelpers} = domTestingLib

export const queryByTestId = queryHelpers.queryByAttribute.bind(
  null,
  'data-test-id',
)
export const queryAllByTestId = queryHelpers.queryAllByAttribute.bind(
  null,
  'data-test-id',
)

export function getAllByTestId(container, id, ...rest) {
  const els = queryAllByTestId(container, id, ...rest)
  if (!els.length) {
    throw queryHelpers.getElementError(
      `Unable to find an element by: [data-test-id="${id}"]`,
      container,
    )
  }
  return els
}

export function getByTestId(container, id, ...rest) {
  // result >= 1
  const result = getAllByTestId(container, id, ...rest)
  if (result.length > 1) {
    throw queryHelpers.getElementError(
      `Found multiple elements with the [data-test-id="${id}"]`,
      container,
    )
  }
  return result[0]
}

// re-export with overrides
module.exports = {
  ...domTestingLib,
  getByTestId,
  getAllByTestId,
  queryByTestId,
  queryAllByTestId,
}

buildQueries

L'utilitaire buildQueries vous permet de créer des requêtes personnalisées avec toutes les requêtes standard de testing-library.

Voir la section Ajouter des requêtes personnalisées du guide de rendu personnalisé pour des exemples d'utilisation.

Utiliser d'autres bibliothèques d'assertions

Si vous n'utilisez pas Jest, vous pourriez trouver un ensemble similaire d'assertions personnalisées pour votre bibliothèque préférée. Voici une liste d'alternatives à jest-dom pour d'autres bibliothèques d'assertions populaires :

• chai-dom

Si vous connaissez d'autres alternatives, merci de soumettre une pull request pour les ajouter ici !

getNodeText

getNodeText(node: HTMLElement)

Retourne le contenu texte complet d'un élément HTML, en supprimant les espaces superflus. L'objectif est de traiter le texte dans les nœuds exactement comme il est perçu par les utilisateurs dans un navigateur, où les espaces supplémentaires au sein des mots dans le code HTML n'ont pas de signification lors du rendu du texte.

// <div>
//   Hello
//     World  !
// </div>
const text = getNodeText(container.querySelector('div')) // "Hello World !"

Cette fonction est également utilisée en interne lors de la requête de nœuds par leur contenu texte. Cela permet aux fonctions comme getByText et queryByText de fonctionner comme prévu, en trouvant des éléments dans le DOM de la même manière que le feraient les utilisateurs.

La fonction a un comportement spécial pour certains éléments d'entrée :

// <input type="submit" value="Send data" />
// <input type="button" value="Push me" />
const submitText = getNodeText(container.querySelector('input[type=submit]')) // "Send data"
const buttonText = getNodeText(container.querySelector('input[type=button]')) // "Push me"

These elements use the attribute `value` and display its value to the user.