我正在用Jest写测试，我遇到了来自React-Router-DOM的Outlet的问题。
我有一个名为Preferences的组件，它嵌套在另一个路由器中。在Preferences中，我有5个子路由：

{/* Route for Preference. */}
<Route
  path="/preferences"
  element={<LazyComponent component={'LazyPreferences'} />}
>
  <Route index element={<LazyComponent component={'LazyAccount'} />} />
  <Route
    path="accounts-1"
    element={<LazyComponent component={'Account-1'} />}
  />
  <Route
    path="accounts-2"
    element={<LazyComponent component={'Account-2'} />}
  />
  <Route
    path="accounts-3"
    element={<LazyComponent component={'Account-3'} />}
  />
</Route>

字符串
在Preferences组件中，我从React-Router-DOM中使用Outlet，如下所示：

const Preferences = () => {
  return (
    <Provider>
      <PreferencesMenu />
      <Outlet />
    </Provider>
  )
}

型
当我模拟Preferences组件时，它只显示Preferences导航。我如何处理像Account-1，.这样的子组件？
这是我的测试

describe('Preferences screen with Account', () => {
    beforeEach(cleanup)

    afterEach(() => {
      jest.clearAllMocks()
    })

    test('Click on the Account option, router will navigate to /accounts', async () => {

          const wrapper = mountWithApp(<Preferences />)

        expect(wrapper).toContainReactText('ACCOUNT')

        await userEvent.click(screen.getByText('ACCOUNT'))
        expect(mockedUseNavigate).toHaveBeenCalledWith('/preferences/accounts')
      })
})

型