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
You can use prettyDOM or asFragment
Eg
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
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.