常见问题解答

• 这个库也适用于 SvelteKit 吗？
• 为什么渲染组件时没有调用 `onMount`？
• 如何测试文件上传？
• 为什么过渡事件没有运行？

---

这个库也适用于 SvelteKit 吗？

是的，可以。它需要与“普通”Svelte 项目相同的 设置。

为什么渲染组件时没有调用 `onMount`？

由于测试是在 Node 环境而不是浏览器环境中运行，因此它使用 Svelte 的 SSR 导出，这些导出将所有生命周期事件声明为无操作。

一种解决方案是配置 Vite 在测试中使用浏览器解析。

vite.config.js

import {svelte} from '@sveltejs/vite-plugin-svelte'
import {defineConfig} from 'vite'

export default defineConfig(({mode}) => ({
  plugins: [svelte()],
  resolve: {
    // The default would be [ 'svelte', 'node' ]
    // as set by vite-plugin-svelte and vitest.
    // This sets [ 'browser', 'svelte', 'node' ]
    conditions: mode === 'test' ? ['browser'] : [],
  },
  test: {
    environment: 'jsdom',
  },
}))

有关更多详细信息，请参阅 svelte-testing-library 的 问题 222。

如何测试文件上传？

使用来自 `@testing-library/user-event` 的 上传 实用程序而不是 `fireEvent`。它在 jsdom 和 happy-dom 中都能很好地工作。

test('upload file', async () => {
  const user = userEvent.setup()

  render(Uploader)
  const file = new File(['hello'], 'hello.png', {type: 'image/png'})
  const input = screen.getByLabelText(/upload file/i)

  await user.upload(input, file)

  expect(input.files[0]).toBe(file)
  expect(input.files.item(0)).toBe(file)
  expect(input.files).toHaveLength(1)
})

为什么 过渡事件 没有运行？

在 Vitest 中，requestAnimationFrame 的 jsdom 实现可能不可靠。为了解决这个问题，您可以

• 切换到 happy-dom（如果您能够），它没有出现相同的问题
• 替换 requestAnimationFrame 的实现

beforeEach(() => {
  const raf = fn => setTimeout(() => fn(new Date()), 16)
  vi.stubGlobal('requestAnimationFrame', raf)
})

// Alternatively, set `unstubGlobals: true` in vitest.config.js
afterEach(() => {
  vi.unstubAllGlobals()
})

有关更多详细信息，请参阅 svelte-testing-library 的 问题 206。