Consultas Personalizadas

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

DOM Testing Library expone muchas funciones auxiliares utilizadas para implementar las consultas predeterminadas. Puedes usar estos helpers para construir consultas personalizadas. Por ejemplo, el siguiente código muestra cómo sobrescribir las consultas testId predeterminadas para usar un atributo de datos diferente. (Nota: los archivos de prueba importarían test-utils.js en lugar de usar DOM Testing Library directamente).

Nota

Las consultas personalizadas pueden agregarse al método render de React Testing Library mediante la adición de queries en el objeto de configuración de opciones. Consulta las opciones de render.

Las consultas personalizadas son diferentes a los métodos de renderizado personalizado.

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

El helper buildQueries te permite crear consultas personalizadas con todas las consultas estándar de testing-library.

Consulta la sección Añadir consultas personalizadas de la guía de renderizado personalizado para ver ejemplos de uso.

Usando otras bibliotecas de aserciones

Si no usas jest, podrías encontrar un conjunto similar de aserciones personalizadas para tu biblioteca preferida. Esta es una lista de alternativas a jest-dom para otras bibliotecas de aserciones populares:

• chai-dom

Si conoces otras alternativas, ¡por favor haz un pull request y agrégalas aquí!

getNodeText

getNodeText(node: HTMLElement)

Devuelve el contenido de texto completo de un elemento HTML, eliminando espacios adicionales. La intención es tratar el texto en nodos exactamente como lo perciben los usuarios en un navegador, donde los espacios adicionales dentro de palabras en el código HTML no son significativos cuando se renderiza el texto.

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

Esta función también se usa internamente al consultar nodos por su contenido de texto. Esto permite que funciones como getByText y queryByText funcionen como se espera, encontrando elementos en el DOM de manera similar a como lo harían los usuarios.

La función tiene un comportamiento especial para ciertos 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.