' IonRouterOutlet '不会在Ionic-React快照测试中进行深度渲染

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导致JSDOM输出<ion-router-outlet />，而不是完整的树。

解决方法是直接使用React Router的Router和MemoryRouter，这取决于你想要访问的history.location.pathname。IonReactRouter在底层使用React Router，所以行为和JSDOM输出应该匹配。