Consultas Personalizadas

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

O DOM Testing Library expõe diversas funções auxiliares utilizadas na implementação das consultas padrão. Você pode aproveitar esses utilitários para criar consultas personalizadas. Por exemplo, o código abaixo demonstra como substituir as consultas padrão testId por um atributo de dados diferente. (Observação: arquivos de teste devem importar test-utils.js em vez de usar o DOM Testing Library diretamente).

Nota

Consultas personalizadas podem ser adicionadas ao método render do React Testing Library incluindo queries no objeto de configuração de opções. Consulte as opções do render.

Consultas personalizadas são diferentes de métodos de renderização personalizada.

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

O utilitário buildQueries permite criar consultas personalizadas com todas as características das consultas padrão do testing-library.

Veja a seção Adicionar consultas personalizadas do guia de renderização personalizada para exemplos de uso.

Usando outras bibliotecas de asserção

Se você não utiliza jest, talvez encontre asserções personalizadas similares para sua biblioteca preferida. Segue uma lista de alternativas ao jest-dom para outras bibliotecas populares:

• chai-dom

Se conhece outras alternativas, por favor envie um pull request para adicioná-las aqui!

getNodeText

getNodeText(node: HTMLElement)

Retorna o conteúdo textual completo de um elemento HTML, removendo espaços extras. O objetivo é tratar textos em nós exatamente como são percebidos por usuários em navegadores, onde espaçamentos adicionais entre palavras no código HTML não possuem significado quando renderizados.

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

Esta função também é usada internamente ao consultar nós por seu conteúdo textual. Isso permite que utilitários como getByText e queryByText funcionem conforme esperado, localizando elementos no DOM de maneira similar à percepção dos usuários.

A função possui comportamento especial para certos elementos de entrada:

// <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.