ByTestId

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? 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

Um atalho para container.querySelector(`[data-testid="${yourId}"]`) (que também aceita um 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')

Seguindo o espírito dos princípios orientadores, recomendamos usar esta consulta apenas quando as outras não funcionarem para seu caso de uso. Atributos data-testid não refletem como seu software é utilizado e devem ser evitados sempre que possível. Dito isso, eles são muito melhores que consultas baseadas na estrutura DOM ou nomes de classes CSS. Saiba mais sobre data-testid no artigo "Making your UI tests resilient to change"

Opções

Opções de TextMatch

Substituindo data-testid

As funções ...ByTestId na DOM Testing Library usam por padrão o atributo data-testid, seguindo o precedente estabelecido pelo React Native Web que utiliza uma prop testID para gerar o atributo data-testid no elemento. Recomendamos adotar esse atributo sempre que possível. Mas se você já possui uma base de código usando outro atributo para esse propósito, pode substituir esse valor via configure({testIdAttribute: 'data-my-test-attribute'}).