vitest-dev/vitest · error · Error

The "preview" provider doesn't support 'userEvent.dragAndDro

Error message

The "preview" provider doesn't support 'userEvent.dragAndDrop'

What it means

The preview browser provider (the in-iframe, testing-library-based provider created via createPreviewUserEvent at packages/browser/src/client/tester/context.ts:188) does not implement dragAndDrop — its implementation is a hard throw. The preview provider simulates user events with @testing-library/user-event inside the same iframe, which has no native drag-and-drop primitive, unlike the playwright/webdriverio providers that delegate to real browser drag APIs.

Source

Thrown at packages/browser/src/client/tester/context.ts:225

          basename: string
          mime: string
        }>('__vitest_fileInfo', [file, 'base64'])

        const fileInstance = fetch(`data:${mime};base64,${base64}`)
          .then(r => r.blob())
          .then(blob => new File([blob], basename, { type: mime }))
        return fileInstance
      })
      const uploadFiles = await Promise.all(uploadPromise)
      return userEvent.upload(toElement(element) as HTMLElement, uploadFiles)
    },

    async fill(element, text) {
      await userEvent.clear(toElement(element))
      return userEvent.type(toElement(element), text)
    },
    async dragAndDrop() {
      throw new Error(`The "preview" provider doesn't support 'userEvent.dragAndDrop'`)
    },

    async type(element, text, options) {
      await userEvent.type(toElement(element), text, options)
    },
    async tab(options) {
      await userEvent.tab(options)
    },
    async keyboard(text: string) {
      await userEvent.keyboard(text)
    },

    async copy() {
      clipboardData = await userEvent.copy()
    },
    async cut() {
      clipboardData = await userEvent.cut()
    },

View on GitHub (pinned to d568f8ce37)

Solutions

1. Switch the browser provider to 'playwright' or 'webdriverio' in vitest config: browser.provider = 'playwright' — these implement dragAndDrop via native browser APIs.
2. If you must stay on preview, replace dragAndDrop with manual pointer event simulation (dispatchEvent dragstart/dragover/drop) or skip the test with it.skip/if the provider is preview.
3. Gate the test: if (browserProvider !== 'preview') { ... dragAndDrop ... }.

Example fix

// before
// vitest.config.ts: browser.provider = 'preview'
await userEvent.dragAndDrop(source, target)
// after
// vitest.config.ts:
//   test: { browser: { provider: 'playwright' } }
await userEvent.dragAndDrop(source, target)

import { server } from 'vitest/browser'
const provider = server.config.browser.provider
if (provider !== 'preview') {
  await userEvent.dragAndDrop(source, target)
} else {
  // skip or manual pointer simulation
}

When it happens

Trigger: Configuring browser provider as 'preview' (or using the default preview UI) and calling userEvent.dragAndDrop(source, target) in a browser test. The throw is unconditional for the preview user event instance (context.ts:224-226).

Common situations: Teams defaulting to the preview provider for speed/dev-loop then writing drag-and-drop tests; component tests that need DnD; CI configs that switched provider without updating affected tests.

Related errors

• Element not found: ${v.element}
• Cannot upload files outside of a test
• Method "getByRole" is not supported by the "${provider}" pro
• Method "getByLabelText" is not supported by the "${provider}
• Method "getByTestId" is not supported by the "${provider}" p

AI-assisted analysis of vitest-dev/vitest@d568f8ce37 (2026-08-03). Data as JSON: /data/errors/6c9a9d1f1f8b05a2.json. Report an issue: GitHub.