ParTestId

[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 →

getByTestId, queryByTestId, getAllByTestId, queryAllByTestId, findByTestId, findAllByTestId

API

getByTestId(
  // If you're using `screen`, then skip the container argument:
  container: HTMLElement,
  text: TextMatch,
  options?: {
    exact?: boolean = true,
    normalizer?: NormalizerFn,
  }): HTMLElement

Un raccourci pour container.querySelector(`[data-testid="${yourId}"]`) (qui accepte également un TextMatch).

<div data-testid="custom-element" />

Native

import {screen} from '@testing-library/dom'

const element = screen.getByTestId('custom-element')

React

import {render, screen} from '@testing-library/react'

render(<MyComponent />)
const element = screen.getByTestId('custom-element')

Angular

import {render, screen} from '@testing-library/angular'

await render(MyComponent)
const element = screen.getByTestId('custom-element')

Cypress

cy.findByTestId('custom-element').should('exist')

Conformément à nos principes directeurs, nous recommandons d'utiliser cette méthode uniquement lorsque les autres requêtes ne fonctionnent pas pour votre cas d'usage. Les attributs data-testid ne reflètent pas l'utilisation réelle de votre logiciel et devraient être évités si possible. Cela dit, ils restent bien préférables aux requêtes basées sur la structure du DOM ou les noms de classes CSS. Pour approfondir le sujet des data-testid, consultez l'article "Making your UI tests resilient to change"

Options

options TextMatch

Surcharger data-testid

Les fonctions ...ByTestId de DOM Testing Library utilisent par défaut l'attribut data-testid, suivant la pratique établie par React Native Web qui utilise une prop testID pour générer un attribut data-testid sur l'élément. Nous recommandons d'adopter cet attribut lorsque possible. Si votre codebase utilise déjà un attribut différent à cette fin, vous pouvez le configurer via configure({testIdAttribute: 'data-my-test-attribute'}).