気づいたら、React Testing Libraryのscreen.debug()が何も表示しなくなっていた。

背景

screen.debug()でレンダリングされるコンポーネントをチェックしようとしたら、何も表示されなくなっていました。

以下のような簡単なコンポーネントも表示されないので、DEBUG_PRINT_LIMITは関係なさそうです。

describe('Test suit', () => {
    test('First test', () => {
        render(<div>Component</div>)
        screen.debug()
    })
})

環境

• Reactフレームワーク
  Create React App(TypeScript)

• Jest + React Testing Library

原因

console.logをsetUpTests.tsに移行したことが原因でした。以下を削除し、各テストファイルにモック宣言を戻すことで、screen.debug()が正常に動作することを確認できました。

setUpTests.ts

console.log = jest.fn()

終わりに

Globalレベルの変数や関数をモックする際は要注意です。テストターゲットのコンポーネントだけでなく、テストフレームワーク・ライブラリにも影響が出る可能性も考慮しなければなりません。