如何在jest和test -library/react-native中获得整个组件树?

Question

我有一个组件，我正在使用jest和react原生测试库进行测试它看起来像这样:

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

我想获得整个渲染树，我尝试使用

renderedComponent.container.children

但是它只获得直接子元素(FallbackErrorBoundary)

我尝试使用expect(renderedComponent).toMatchSnapshot()但这不是很有帮助

Answer 1

可以使用prettyDOM或asFragment

。

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>
`);

如果您不需要DocumentFragment元素，您可以使用asFragment().firstChild。