使用 vitest 来测试基于历史记录的路由器时，如何重置 jsdom 实例？

Question

我想使用 + 对基于svelte+page.js的路由器进行一些集成测试vitest，但我遇到了一个问题，即jsdom每个测试文件实例仅正确更新一次。

在以下设置中，当运行时.only或将每个测试拆分到其自己的文件中时，任一测试都会通过。但当它们按顺序运行时，第二个总是会失败。检查 DOM 发现screen.debug()它是空的，并且调用actortick似乎没有做任何事情。

我怀疑这与如何jsdom与 History API 交互有关，但我不知道从这里到哪里去。

根细

<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 } />

根.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。在该问题中，建议是调用jsdom.reconfigure()一个beforeEach块，但我不知道如何获取实例jsdom以vitest进行尝试。

欢迎任何想法或替代方法，谢谢！

Answer 1

从1.3.0版本开始，Vitest公开了一个jsdom全局变量，所以应该可以调用

jsdom.reconfigure(/* ... */)

另请参阅https://vitest.dev/config/#environment（滚动到该部分的底部）