除錯

自動記錄

當你在測試案例中使用的任何 get 或 find 呼叫失敗時，container（DOM）的當前狀態會印在主控台上。例如

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

上面的測試案例將會失敗，但是它會印出你測試的 DOM 狀態，所以你會看到

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>

注意：由於 DOM 的大小可能會變得非常大，你可以透過環境變數 DEBUG_PRINT_LIMIT 設定要列印的 DOM 內容的限制。預設值為 7000。當 DOM 內容因你設定的長度或預設大小限制而被剝除時，你將在主控台中看到 ...。以下是如何在執行測試時增加此限制的方法

npm

DEBUG_PRINT_LIMIT=10000 npm test

Yarn

DEBUG_PRINT_LIMIT=10000 yarn test

這在 macOS/Linux 上有效，你需要在 Windows 上執行其他操作。如果你想要一個適用於兩者的解決方案，請參閱 cross-env。

注意：如果你的測試在 node 環境中執行，則預設會對 DOM 的輸出進行著色。但是，有時你可能想要關閉顏色，例如在將輸出寫入日誌檔以進行除錯的情況下。你可以使用環境變數 COLORS 明確強制關閉或開啟著色。例如

npm

COLORS=false npm test

Yarn

COLORS=false yarn test

這在 macOS/Linux 上有效，你需要在 Windows 上執行其他操作。如果你想要一個適用於兩者的解決方案，請參閱 cross-env。

prettyDOM

建立在 pretty-format 之上，此輔助函式可用於印出節點的 DOM 樹狀結構的可讀表示形式。這在除錯測試時會很有幫助。

它的定義為

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

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

它接收要印出的根節點，一個可選的額外參數，用於限制結果字串的大小，以應對它變得太大的情況。它還有最後一個參數，可讓你設定格式。除了列出的選項之外，你還可以傳遞 pretty-format 的 選項。

預設情況下，<style />、<script /> 和註解節點會被忽略。你可以通過傳遞一個自訂的 filterNode 函式來設定此行為，對於每個你希望包含在輸出中的節點，該函式應傳回 true。

此函式通常與 console.log 一起使用，以在測試期間臨時印出 DOM 樹狀結構，以進行除錯

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>

此函式也是 上面描述的自動除錯輸出 的基礎。

screen.debug()

為了方便起見，screen 也公開了一個 debug 方法。此方法本質上是 console.log(prettyDOM()) 的捷徑。它支援除錯文件、單個元素或元素陣列。

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()

為了使用 testing-playground 進行除錯，screen 公開了此方便的方法，該方法會記錄並傳回可在瀏覽器中開啟的 URL。

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

此輔助函式可用於印出 DOM 節點樹狀結構中所有隱式 ARIA 角色的清單，每個角色都包含與該角色匹配的所有節點的清單。這對於尋找使用 getByRole 查詢測試中的 DOM 的方法很有幫助。

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)

結果

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