使用Vitest测试Svelte+page.js路由时如何重置jsdom实例？

在对Svelte+page.js的路由做集成测试时遇到以下问题：

• 单个测试用.only执行或拆分到独立文件时全部通过，但按顺序运行时第二个测试必然失败
• 通过screen.debug()查看DOM为空，调用act或tick均无效果
• 推测问题与JSDOM和History API的交互有关，但不知如何解决

相关代码 #

Root.svelte #

<script>
  import page from 'page'

  import SignIn from './SignIn/SignIn.svelte'
  import Upload from './Upload/Upload.svelte'
  import { authenticationToken } from './Root.stores.js'

  let currentPage

  page('/', () => {
    page.redirect('/sign-in')
  })

  page('/sign-in', () => {
    currentPage = SignIn
  })

  page('/upload', () => {
    if ($authenticationToken === null) {
      return page.redirect('/sign-in')
    }

    currentPage = Upload
  })

  page.start()
</script>

<svelte:component this={ currentPage } />

Root.svelte.test.js #

import page from 'page'
import Root from './Root.svelte'
import { authenticationToken } from './Root.stores.js'

it('redirects to sign in when not authenticated', async () => {
  vi.spyOn(page, 'redirect')
  authenticationToken.set(null)

  const { act } = setupComponent(Root)
  await act(() => page('/upload'))

  expect(page.redirect).toHaveBeenCalledWith('/sign-in')
})

it('displays the upload screen when authenticated', async () => {
  authenticationToken.set('token')

  const { act } = setupComponent(Root)
  await act(() => page('/upload'))

  expect(document.getElementById('upload')).toBeInTheDocument()
})

调研情况 #

曾在Jest项目中遇到类似问题，当时的解决方案建议在beforeEach块中调用jsdom.reconfigure()，但不清楚在Vitest中如何获取JSDOM实例来尝试该方案。

寻求解决思路或替代方案，谢谢！

内容的提问来源于stack exchange，提问作者jrh