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

Question

我想使用

svelte

对基于

page.js

+

vitest

的路由器进行一些集成测试，但我遇到了一个问题，即

jsdom

实例每个测试文件只能正确更新一次。

在以下设置中，当使用

.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 项目中的

this

类似。在该问题中，建议是在

jsdom.reconfigure()

块中调用

beforeEach

，但我不知道如何获取

jsdom

中的

vitest

实例来尝试这样做。

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

Answer 1

从1.3.0版本开始，Vitest暴露了一个

jsdom

全局变量，所以应该可以调用

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

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