如何在 jest 和 testing-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 。