在Ionic-React快照测试中，`IonRouterOutlet`没有深度渲染

Question

我正在尝试做一个由Ionic React路由器包装的组件的快照，并执行深度渲染。但在我的例子中，IonicRouterOutlet似乎不能深度渲染。有什么建议可以解决这个问题并成功地执行深度渲染吗？

下面是我的示例代码：

import React from 'react'
import { render } from '@testing-library/react'
import { IonRouterOutlet } from '@ionic/react'
import { IonReactRouter } from '@ionic/react-router'

jest.mock('@capacitor/core', () => ({
  Plugins: {
    StatusBar: {
      setStyle: jest.fn()
    },
    Storage: {
      set: jest.fn(),
      get: () => ""
    }
  },
  StatusBarStyle: {
    Light: "LIGHT"
  },
}));

describe('component', () => {
  let component

  beforeEach(async () => {
    component = render(
      <IonReactRouter>
        <IonRouterOutlet>
          <div />
        </IonRouterOutlet>
      </IonReactRouter>
    )
  })

  describe('snapshot', () => {
    it('should match snapshot', () => {
      const { asFragment } = component
      expect(asFragment()).toMatchSnapshot()
    })
  })
})

下面是我的快照输出：

exports[`Login component snapshot should match snapshot 1`] = `
<DocumentFragment>
  <ion-router-outlet />
</DocumentFragment>
`;

如您所见，<div />不是在快照输出中生成的。那么如何解决这个问题呢？

Answer 1

我找到了这个文档，我认为它会对https://github.com/crossroads/app.goodchat.hk/wiki/Testing-Routing很有帮助

基本上，正如您已经发现的那样，使用IonReactRouter & IonRouterOutlet会导致输出<ion-router-outlet />而不是整个树。

解决方法是直接使用React路由器的Router和MemoryRouter，这取决于您要访问的内容，例如history.location.pathname。IonReactRouter在幕后使用了React Router，因此行为和JSDOM输出应该匹配。