Ir para o conteúdo principal

Depuração

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

Registro Automático​

Quando qualquer chamada get ou find usada em seus casos de teste falhar, o estado atual do container (DOM) será exibido no console. Por exemplo:

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

O caso de teste acima falhará, mas imprimirá o estado do DOM que está sendo testado, então você 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>

Observação: Como o DOM pode ficar muito grande, você pode definir o limite de conteúdo DOM a ser impresso através da variável de ambiente DEBUG_PRINT_LIMIT. O valor padrão é 7000. Você verá ... no console quando o conteúdo do DOM for truncado devido ao limite definido ou ao tamanho máximo padrão. Veja como aumentar esse limite ao executar testes:

DEBUG_PRINT_LIMIT=10000 npm test

Isso funciona no macOS/Linux - para Windows será necessário outra abordagem. Se desejar uma solução multiplataforma, veja cross-env.

Observação: A saída do DOM é colorizada por padrão se seus testes rodarem em ambiente Node. Porém, às vezes você pode querer desativar as cores, como quando a saída é gravada em arquivo de log para depuração. Use a variável de ambiente COLORS para forçar explicitamente a colorização. Exemplo:

COLORS=false npm test

Isso funciona no macOS/Linux - para Windows será necessário outra abordagem. Se desejar uma solução multiplataforma, veja cross-env.

prettyDOM​

Construída sobre pretty-format, esta função auxiliar pode ser usada para imprimir uma representação legível da árvore DOM de um nó. Isso pode ser útil durante a depuração de testes, por exemplo.

Ela é definida como:

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

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

Ela recebe o nó raiz a ser impresso, um parâmetro extra opcional para limitar o tamanho da string resultante (para quando ela ficar muito grande), e um último parâmetro que permite configurar a formatação. Além das opções listadas, você também pode passar as opções do pretty-format.

Por padrão, nós <style />, <script /> e comentários são ignorados. Configure este comportamento passando uma função filterNode personalizada que retorne true para nós que devem ser incluídos.

Normalmente usada com console.log para impressão temporária de árvores DOM durante testes de depuração:

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 função também é responsável por gerar a saída automática de depuração mencionada anteriormente.

screen.debug()​

Por conveniência, o screen expõe um método debug. É essencialmente um atalho para console.log(prettyDOM()). Permite depurar o documento, um elemento único ou arrays 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 depuração usando testing-playground, o screen expõe este método conveniente que registra e retorna uma URL que pode ser aberta no 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 função auxiliar pode ser usada para imprimir uma lista de todos os papéis ARIA implícitos dentro de uma árvore de nós DOM, onde cada papel contém uma lista de todos os nós que correspondem a esse papel. Isso pode ser útil para encontrar formas de consultar o DOM em teste com 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 />
--------------------------------------------------