【小ネタ】Testing Library で省略されてしまったエラーメッセージを表示する方法

困りごと

JavaScript/TypeScript の Testing Library を使ってテストを書いている時、特に React などのフロントエンドのテストでページに表示されている要素を確認するテストを書いていると、 エラーメッセージとして表示される DOM ツリーが巨大で途中で切れてしまうことがあります。

例: コンポーネントを render して、 screen.findAllByTestId('my-test-id') などを使ったテストが失敗したとき。

こうなってしまうと要素が見つからないというエラーメッセージが出るものの、実際にどんな HTML が render されているのかが分からずに、なぜ目的の要素がないのかが分からず途方に暮れることになります。

解決策

そんなときはテストの実行時に環境変数 DEBUG_PRINT_LIMIT を付けることで省略を防ぐことが出来ます。

例: DEBUG_PRINT_LIMIT=30000 npm run test (エラーメッセージが 30000 文字まで省略されなくなる)

DEBUG_PRINT_LIMIT のデフォルト値は 7000 です。 なのでエラーメッセージが切れてしまっていると言うことは、エラーメッセージが 7000 文字以上あったということですので、 DEBUG_PRINT_LIMIT を 7000 よりも大きくすることで省略されていた部分のエラーメッセージが表示されるようになります。