@testing-library/react の debug が途中で途切れてしまう問題について

debug の出力には文字数制限があります。それを回避する方法について紹介します。

in short: debug ではなく prettyDOM(baseElement)) を使う

const { debug } = render(<HelloWorld />);
debug();

↓

import { prettyDOM } from '@testing-library/react';
const { baseElement } = render(<HelloWorld />);
console.log(prettyDOM(baseElement, Infinity));

debug() を console.log(prettyDOM(baseElement, Infinity)) に直します。

debug はただのショートカット

debug は console.log(prettyDOM(baseElement)) のショートカットです (参照)

prettyDOM 関数 には maxLength という引数を持ちます。名前の通り、maxLength は出力の最大文字数です。maxLength は デフォルトが 7000 なので、debug 関数では7000文字しか表示されません。

7000 文字の制限を突破するには、prettyDOM の第二引数 (=maxLength) に Infinity を渡せば OK です。ただし debug 関数からでは maxLength に Infinity を渡せないので、debug を prettyDOM に書き直します。

import { prettyDOM } from '@testing-library/react';
const { baseElement } = render(<HelloWorld />);
console.log(prettyDOM(baseElement, Infinity));