如何使用 Jest 和 Ract-Bootstrap 测试 React 组件

Question

我正在尝试对应该绘制的组件进行视觉测试。

我的组件是：

import {Fragment} from 'react'
import {NavDropdown, Nav, Navbar} from 'react-bootstrap'
export default function Header({listaVisualizacion}){
 return(
   <Fragment >
      <Nav className='mr-auto'>
        {listaVisualizacion.campanas && (
          <NavDropdown title='Campañas' id='navCampanas'>
            {listaVisualizacion.crear_companas && (
                 <NavDropdown.Item onClick={redireccion}>
                            items
                  </NavDropdown.Item>
             )}
          </NavDropdown>
      </Nav>
   </Fragment >
 )
}

我的 test.js 是：

describe('Header.jsx',()=>{
    it('test',()=>{
       const listaVisualizacion = [{
         campanas:true,
         crear:true,
       }]
      const tree = renderer.create(
        <Header 
            listaVisualizacion={listaVisualizacion}
        />)
      expect(tree).toMatchSnapshot()
    })
    
})

我的 snap 向我发送了一个文件，它将 NavDropdown 解释为

<块引用>

<按钮 aria-controls = "基本导航栏导航" aria-label = "切换导航" className = "导航栏切换器已折叠" onClick = {[函数]} type = "按钮"

<块引用>

这就是我来向您寻求帮助的地方，我想知道如何打印真正的 html，该 html 会向我展示我应该在视觉上显示的内容的小菜单，从而能够进行更完整的测试，我对这一切都很陌生，同样我来寻求您的帮助。