メインコンテンツにスキップ

FAQ

このライブラリはSvelteKitでも動作しますか？​

はい、動作します。通常のSvelteプロジェクトと同じセットアップが必要です。

コンポーネントをレンダリングするときにonMountが呼び出されないのはなぜですか？​

テストはブラウザ環境ではなくNode環境で実行されているため、SvelteのSSRエクスポートを使用します。これにより、すべてのライフサイクルイベントがno-opとして宣言されます。

1つの解決策は、テストでブラウザの解決を使用するように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のissue 222を参照してください。

ファイルのアップロードをテストするにはどうすればよいですか？​

fireEventではなく、@testing-library/user-eventのuploadユーティリティを使用してください。これは、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)
})

トランジションイベントが実行されないのはなぜですか？​

requestAnimationFrameのjsdomの実装は、Vitestでは信頼性が低い場合があります。これを回避するには、以下を実行できます。

  • 同じ問題が発生しない場合は、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のissue 206を参照してください。