ByTestId

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

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 acceso directo a container.querySelector(`[data-testid="${yourId}"]`) (y que también acepta 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')

Siguiendo el espíritu de los principios rectores, se recomienda usar esto solo cuando las demás consultas no funcionen para tu caso de uso. El uso de atributos data-testid no refleja cómo se utiliza tu software y debe evitarse siempre que sea posible. Dicho esto, son mucho mejores que consultar basándose en la estructura del DOM o en nombres de clases CSS. Aprende más sobre los data-testid en la publicación de blog "Hacer que tus pruebas de UI sean resistentes al cambio"

Opciones

Opciones de TextMatch

Reemplazo de data-testid

Las funciones ...ByTestId en DOM Testing Library usan el atributo data-testid por defecto, siguiendo el precedente establecido por React Native Web que utiliza una propiedad testID para emitir un atributo data-testid en el elemento. Recomendamos adoptar ese atributo siempre que sea posible. Pero si ya tienes una base de código existente que utiliza un atributo diferente para este propósito, puedes sobrescribir este valor mediante configure({testIdAttribute: 'data-my-test-attribute'}).