feat(browser): support "none" provider and update lit example to use …

…it (#4427)

examples/lit/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@vitest/example-lit",
+  "type": "module",
   "private": true,
   "files": [
     "dist",
@@ -12,13 +13,15 @@
     "test:ui": "vitest --ui"
   },
   "dependencies": {
-    "lit": "^2.2.5"
+    "lit": "^3.0.1"
   },
   "devDependencies": {
+    "@vitest/browser": "latest",
     "@vitest/ui": "latest",
     "jsdom": "latest",
     "vite": "latest",
-    "vitest": "latest"
+    "vitest": "latest",
+    "webdriverio": "^8.21.0"
   },
   "stackblitz": {
     "startCommand": "npm run test:ui"

examples/lit/test/basic.test.ts

@@ -1,22 +1,14 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import '../src/my-button'
+import '../src/my-button.js'
 
 describe('Button with increment', async () => {
   function getInsideButton(): HTMLElement | null | undefined {
     return document.body.querySelector('my-button')?.shadowRoot?.querySelector('button')
   }
 
-  beforeEach(async () => {
+  beforeEach(() => {
     document.body.innerHTML = '<my-button name="World"></my-button>'
-    await new Promise<void>((resolve) => {
-      const interval = setInterval(() => {
-        if (getInsideButton()) {
-          clearInterval(interval)
-          resolve()
-        }
-      })
-    })
   })
 
   it('should increment the count on each click', () => {

examples/lit/tsconfig.json

@@ -1,7 +1,10 @@
 {
   "compilerOptions": {
+    "module": "node16",
+    "target": "es2020",
+    "moduleResolution": "Node16",
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
-    "importsNotUsedAsValues": "preserve"
+    "verbatimModuleSyntax": true
   }
 }

examples/lit/vite.config.ts

@@ -5,7 +5,9 @@ import { defineConfig } from 'vite'
 // https://vitejs.dev/config/
 export default defineConfig({
   test: {
-    globals: true,
-    environment: 'jsdom',
+    browser: {
+      enabled: true,
+      name: 'chrome',
+    },
   },
 })

packages/browser/providers.d.ts

@@ -2,5 +2,6 @@ import type { BrowserProvider } from 'vitest/nide'
 
 declare var webdriverio: BrowserProvider
 declare var playwright: BrowserProvider
+declare var none: BrowserProvider
 
-export { webdriverio, playwright }
+export { webdriverio, playwright, none }

packages/browser/src/node/providers/index.ts

@@ -1,5 +1,7 @@
 import { PlaywrightBrowserProvider } from './playwright'
 import { WebdriverBrowserProvider } from './webdriver'
+import { NoneBrowserProvider } from './none'
 
 export const webdriverio = WebdriverBrowserProvider
 export const playwright = PlaywrightBrowserProvider
+export const none = NoneBrowserProvider

packages/browser/src/node/providers/none.ts

@@ -0,0 +1,40 @@
+import type { Awaitable } from 'vitest'
+import type { BrowserProvider, WorkspaceProject } from 'vitest/node'
+
+export class NoneBrowserProvider implements BrowserProvider {
+  public name = 'none'
+  private ctx!: WorkspaceProject
+  private open = false
+
+  getSupportedBrowsers() {
+    // `none` is not restricted to certain browsers.
+    return []
+  }
+
+  isOpen() {
+    return this.open
+  }
+
+  async initialize(ctx: WorkspaceProject) {
+    this.ctx = ctx
+    this.open = false
+  }
+
+  catchError(_cb: (error: Error) => Awaitable<void>) {
+    return () => {}
+  }
+
+  async openPage(_url: string) {
+    this.open = true
+    if (!this.ctx.browser)
+      throw new Error('Browser is not initialized')
+    const options = this.ctx.browser.config.server
+    const _open = options.open
+    options.open = _url
+    this.ctx.browser.openBrowser()
+    options.open = _open
+  }
+
+  async close() {
+  }
+}

packages/vitest/src/integrations/browser.ts

@@ -6,14 +6,17 @@ interface Loader {
   executeId: (id: string) => any
 }
 
+const builtinProviders = ['webdriverio', 'playwright', 'none']
+
 export async function getBrowserProvider(options: ResolvedBrowserOptions, loader: Loader): Promise<BrowserProviderModule> {
-  if (options.provider == null || options.provider === 'webdriverio' || options.provider === 'playwright') {
+  if (options.provider == null || builtinProviders.includes(options.provider)) {
     await ensurePackageInstalled('@vitest/browser', loader.root)
     const providers = await loader.executeId('@vitest/browser/providers') as {
       webdriverio: BrowserProviderModule
       playwright: BrowserProviderModule
+      none: BrowserProviderModule
     }
-    const provider = (options.provider || 'webdriverio') as 'webdriverio' | 'playwright'
+    const provider = (options.provider || 'webdriverio') as 'webdriverio' | 'playwright' | 'none'
     return providers[provider]
   }
 

packages/vitest/src/node/config.ts

@@ -5,7 +5,7 @@ import type { ResolvedConfig as ResolvedViteConfig } from 'vite'
 import type { ApiConfig, ResolvedConfig, UserConfig, VitestRunMode } from '../types'
 import { defaultBrowserPort, defaultPort } from '../constants'
 import { benchmarkConfigDefaults, configDefaults } from '../defaults'
-import { isCI, toArray } from '../utils'
+import { isCI, stdProvider, toArray } from '../utils'
 import { VitestCache } from './cache'
 import { BaseSequencer } from './sequencers/BaseSequencer'
 import { RandomSequencer } from './sequencers/RandomSequencer'
@@ -386,6 +386,9 @@ export function resolveConfig(
   resolved.browser.slowHijackESM ??= false
   resolved.browser.isolate ??= true
 
+  if (resolved.browser.enabled && stdProvider === 'stackblitz')
+    resolved.browser.provider = 'none'
+
   resolved.browser.api = resolveApiServerConfig(resolved.browser) || {
     port: defaultBrowserPort,
   }

packages/vitest/src/node/workspace.ts

@@ -376,7 +376,7 @@ export class WorkspaceProject {
     const supportedBrowsers = this.browserProvider.getSupportedBrowsers()
     if (!browser)
       throw new Error(`[${this.getName()}] Browser name is required. Please, set \`test.browser.name\` option manually.`)
-    if (!supportedBrowsers.includes(browser))
+    if (supportedBrowsers.length && !supportedBrowsers.includes(browser))
       throw new Error(`[${this.getName()}] Browser "${browser}" is not supported by the browser provider "${this.browserProvider.name}". Supported browsers: ${supportedBrowsers.join(', ')}.`)
     const providerOptions = this.config.browser.providerOptions
     await this.browserProvider.initialize(this, { browser, options: providerOptions })

packages/vitest/src/types/browser.ts

@@ -40,7 +40,7 @@ export interface BrowserConfigOptions {
    *
    * @default 'webdriverio'
    */
-  provider?: 'webdriverio' | 'playwright' | (string & {})
+  provider?: 'webdriverio' | 'playwright' | 'none' | (string & {})
 
   /**
    * Options that are passed down to a browser provider.

packages/vitest/src/utils/env.ts

@@ -1,3 +1,3 @@
 export const isNode: boolean = typeof process < 'u' && typeof process.stdout < 'u' && !process.versions?.deno && !globalThis.window
 export const isBrowser: boolean = typeof window !== 'undefined'
-export { isCI } from 'std-env'
+export { isCI, provider as stdProvider } from 'std-env'