How to get the whole components tree in jest and testing-library/react-native?

Question

I have a component that I am testing using jest and react native testing library that looks something like this :

<FallbackErrorBoundary>
  <Wrapper>
    <Component1>
      <Component2>

      </Component2>

    </Component1>
  </Wrapper>
 </FallbackErrorBoundary>

I want to get the whole rendered tree , I tried using

renderedComponent.container.children

But It only gets the direct children (FallbackErrorBoundary)

I tried using expect(renderedComponent).toMatchSnapshot() but It's not very helpful

Answer 1

You can use prettyDOM or asFragment

E.g.

import React from 'react'
import { render, prettyDOM } from '@testing-library/react'

const HelloWorld = () => <h1>Hello World</h1>
const {container, } = render(<HelloWorld />)
const treeString = prettyDOM(container);
console.log(treeString)
// <div>
//   <h1>Hello World</h1>
// </div>

expect(asFragment()).toMatchInlineSnapshot(`
  <DocumentFragment>
    <h1>
      Hello World
    </h1>
  </DocumentFragment>
`);

If you don't want DocumentFragment element, you can use asFragment().firstChild.