Saltar al contenido principal

Depuración

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

Registro Automático​

Cuando algún método get o find usado en tus casos de prueba falla, el estado actual del container (DOM) se imprime en la consola. Por ejemplo:

// <div>Hello world</div>
getByText(container, 'Goodbye world') // will fail by throwing error

El caso de prueba anterior fallará, pero imprimirá el estado de tu DOM bajo prueba, por lo que podrás ver:

Unable to find an element with the text: Goodbye world. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Here is the state of your container:
<div>
  <div>
    Hello world
  </div>
</div>

Nota: Dado que el tamaño del DOM puede ser muy grande, puedes establecer el límite de contenido DOM a imprimir mediante la variable de entorno DEBUG_PRINT_LIMIT. El valor predeterminado es 7000. Verás ... en la consola cuando el contenido del DOM se recorte debido al límite establecido o al tamaño predeterminado. Así es como podrías aumentar este límite al ejecutar pruebas:

DEBUG_PRINT_LIMIT=10000 npm test

Esto funciona en macOS/Linux; para Windows necesitarás otra solución. Si deseas una opción multiplataforma, consulta cross-env.

Nota: La salida del DOM tiene colores por defecto si las pruebas se ejecutan en entorno Node. Sin embargo, a veces querrás desactivar los colores, como cuando la salida se escribe en un archivo de registro para depuración. Puedes usar la variable de entorno COLORS para forzar explícitamente la colorización:

COLORS=false npm test

Esto funciona en macOS/Linux; para Windows necesitarás otra solución. Si deseas una opción multiplataforma, consulta cross-env.

prettyDOM​

Basada en pretty-format, esta función auxiliar permite imprimir representaciones legibles del árbol DOM de un nodo. Esto resulta útil, por ejemplo, durante la depuración de pruebas.

Se define como:

interface Options extends prettyFormat.OptionsReceived {
  filterNode?: (node: Node) => boolean
}

function prettyDOM(
  node: HTMLElement,
  maxLength?: number,
  options?: Options,
): string

Recibe el nodo raíz a imprimir, un parámetro opcional para limitar el tamaño de la cadena resultante (cuando sea demasiado grande), y un último parámetro que permite configurar el formato. Además de las opciones mencionadas, también puedes pasar las opciones de pretty-format.

Por defecto, se ignoran nodos <style />, <script /> y comentarios. Puedes configurar esto pasando una función filterNode personalizada que devuelva true para los nodos que quieras incluir.

Esta función se usa normalmente con console.log para imprimir árboles DOM temporalmente durante pruebas:

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

const div = document.createElement('div')
div.innerHTML = '<div><h1>Hello World</h1></div>'
console.log(prettyDOM(div))
// <div>
//   <h1>Hello World</h1>
// </div>

Esta función también impulsa la salida de depuración automática descrita anteriormente.

screen.debug()​

Por conveniencia, screen expone un método debug. Esencialmente es un atajo para console.log(prettyDOM()). Permite depurar el documento, un elemento individual o un array de elementos.

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

document.body.innerHTML = `
  <button>test</button>
  <span>multi-test</span>
  <div>multi-test</div>
`

// debug document
screen.debug()
// debug single element
screen.debug(screen.getByText('test'))
// debug multiple elements
screen.debug(screen.getAllByText('multi-test'))

screen.logTestingPlaygroundURL()​

Para depurar usando testing-playground, screen expone este método práctico que registra y devuelve una URL que puede abrirse en un navegador.

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

document.body.innerHTML = `
  <button>test</button>
  <span>multi-test</span>
  <div>multi-test</div>
`

// log entire document to testing-playground
screen.logTestingPlaygroundURL()
// log a single element
screen.logTestingPlaygroundURL(screen.getByText('test'))

logRoles​

Esta función auxiliar imprime una lista de todos los roles ARIA implícitos dentro de un árbol de nodos DOM, mostrando para cada rol los nodos que coinciden. Resulta útil para encontrar formas de consultar el DOM bajo prueba con getByRole.

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

const nav = document.createElement('nav')
nav.innerHTML = `
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>`

logRoles(nav)

Resultado:

navigation:
<nav />
--------------------------------------------------
list:
<ul />
--------------------------------------------------
listitem:
<li />
<li />
--------------------------------------------------