test(vapor): use browser mode instead of pupeteer to run tests (#13934)

.gitignore

@@ -12,3 +12,4 @@ dts-build/packages
 *.tsbuildinfo
 *.tgz
 packages-private/benchmark/reference
+**/__tests__/**/__screenshots__/**/*

package.json

@@ -19,7 +19,7 @@
     "test": "vp test",
     "test-unit": "vp test --project unit*",
     "test-e2e": "node scripts/build.js -e vue -f global+esm-browser-vapor -d && vp test --project e2e",
-    "test-e2e-vapor": "vp run prepare-e2e-vapor && vp test --project e2e-vapor",
+    "test-e2e-vapor": "vp run prepare-e2e-vapor && VUE_INCLUDE_VAPOR_BROWSER_E2E=1 vp test --project 'e2e-vapor*'",
     "prepare-e2e-vapor": "node scripts/build.js -e -f cjs+esm-bundler+esm-bundler-runtime && vp build packages-private/vapor-e2e-test",
     "test-dts": "run-s build-dts test-dts-only",
     "test-dts-only": "tsc -p packages-private/dts-built-test/tsconfig.json && tsc -p ./packages-private/dts-test/tsconfig.test.json && tsc -p ./packages-private/dts-test/vapor/tsconfig.json",
@@ -58,6 +58,7 @@
     "@types/serve-handler": "^6.1.4",
     "@vitest/coverage-v8": "^4.0.18",
     "@vitest/ui": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.14",
     "@vue/consolidate": "1.0.0",
     "conventional-changelog-cli": "^5.0.0",
     "enquirer": "^2.4.1",
@@ -73,6 +74,7 @@
     "oxc-transform": "^0.116.0",
     "oxc-minify": "^0.116.0",
     "picocolors": "^1.1.1",
+    "playwright": "^1.56.1",
     "pretty-bytes": "^7.1.0",
     "pug": "^3.0.3",
     "puppeteer": "~24.38.0",

packages-private/vapor-e2e-test/__tests__/e2eUtils.ts

@@ -0,0 +1,17 @@
+import { type Locator, page, userEvent } from 'vitest/browser'
+
+export const css = (css: string) => page.getByCSS(css)
+export const E2E_TIMEOUT: number = 30 * 1000
+
+export async function enterValue(locator: Locator, text: string) {
+  await locator.fill(text)
+  await userEvent.type(locator, '{enter}')
+}
+
+export function nextFrame() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(resolve)
+    })
+  })
+}

packages-private/vapor-e2e-test/__tests__/setupBrowser.ts

@@ -0,0 +1,17 @@
+import { type Locator, locators } from 'vitest/browser'
+
+locators.extend({
+  getByCSS(css: string) {
+    return `css=${css}`
+  },
+})
+
+const div = document.createElement('div')
+div.id = 'app'
+document.body.appendChild(div)
+
+declare module 'vitest/browser' {
+  interface LocatorSelectors {
+    getByCSS(css: string): Locator
+  }
+}

packages-private/vapor-e2e-test/__tests__/todomvc.spec.ts

@@ -1,191 +1,182 @@
-import {
-  E2E_TIMEOUT,
-  setupPuppeteer,
-} from '../../../packages/vue/__tests__/e2e/e2eUtils'
-import { startE2ETestServer } from './server'
+import { userEvent } from 'vitest/browser'
+import { createVaporApp } from 'vue'
+import App from '../todomvc/App.vue'
+import 'todomvc-app-css/index.css'
+import { E2E_TIMEOUT, css, enterValue } from './e2eUtils'
+
+beforeAll(() => {
+  // MVC relies on local storage, but it persists between reruns in watch mode
+  localStorage.clear()
+})
 
 describe('e2e: todomvc', () => {
-  const {
-    page,
-    click,
-    isVisible,
-    count,
-    text,
-    value,
-    isChecked,
-    isFocused,
-    classList,
-    enterValue,
-    clearValue,
-    timeout,
-  } = setupPuppeteer()
-
-  let server: Awaited<ReturnType<typeof startE2ETestServer>>
-  let port = 0
-  beforeAll(async () => {
-    server = await startE2ETestServer('todomvc', import.meta.dirname)
-    port = server.port
+  test('vapor', { timeout: E2E_TIMEOUT }, async () => {
+    createVaporApp(App).mount('#app')
+
+    expect(css('.main')).not.toBeVisible()
+    expect(css('.footer')).not.toBeVisible()
+    expect(css('.filters .selected')).toHaveLength(1)
+    expect(css('.filters .selected')).toHaveTextContent('All')
+    expect(css('.todo')).toHaveLength(0)
+
+    await enterValue(css('.new-todo'), 'test')
+    expect(css('.todo')).toHaveLength(1)
+    expect(css('.todo .edit')).not.toBeVisible()
+    expect(css('.todo label')).toHaveTextContent('test')
+    expect(css('.todo-count strong')).toHaveTextContent('1')
+    expect(css('.todo .toggle')).not.toBeChecked()
+    expect(css('.main')).toBeVisible()
+    expect(css('.footer')).toBeVisible()
+    expect(css('.clear-completed')).not.toBeVisible()
+    expect(css('.new-todo')).toHaveValue('')
+
+    await enterValue(css('.new-todo'), 'test2')
+    expect(css('.todo')).toHaveLength(2)
+    expect(css('.todo:nth-child(2) label')).toHaveTextContent('test2')
+    expect(css('.todo-count strong')).toHaveTextContent('2')
+
+    // toggle
+    await css('.todo .toggle').first().click()
+    expect(css('.todo.completed')).toHaveLength(1)
+    expect(css('.todo:nth-child(1)')).toHaveClass('completed')
+    expect(css('.todo-count strong')).toHaveTextContent('1')
+    expect(css('.clear-completed')).toBeVisible()
+
+    await enterValue(css('.new-todo'), 'test3')
+    expect(css('.todo')).toHaveLength(3)
+    expect(css('.todo:nth-child(3) label')).toHaveTextContent('test3')
+    expect(css('.todo-count strong')).toHaveTextContent('2')
+
+    await enterValue(css('.new-todo'), 'test4')
+    await enterValue(css('.new-todo'), 'test5')
+    expect(css('.todo')).toHaveLength(5)
+    expect(css('.todo-count strong')).toHaveTextContent('4')
+
+    // toggle more
+    await css('.todo:nth-child(4) .toggle').click()
+    await css('.todo:nth-child(5) .toggle').click()
+    expect(css('.todo.completed')).toHaveLength(3)
+    expect(css('.todo-count strong')).toHaveTextContent('2')
+
+    // remove
+    await removeItemAt(1)
+    expect(css('.todo')).toHaveLength(4)
+    expect(css('.todo.completed')).toHaveLength(2)
+    expect(css('.todo-count strong')).toHaveTextContent('2')
+    await removeItemAt(2)
+    expect(css('.todo')).toHaveLength(3)
+    expect(css('.todo.completed')).toHaveLength(2)
+    expect(css('.todo-count strong')).toHaveTextContent('1')
+
+    // remove all
+    await css('.clear-completed').click()
+    expect(css('.todo')).toHaveLength(1)
+    expect(css('.todo label')).toHaveTextContent('test2')
+    expect(css('.todo.completed')).toHaveLength(0)
+    expect(css('.todo-count strong')).toHaveTextContent('1')
+    expect(css('.clear-completed')).not.toBeVisible()
+
+    // prepare to test filters
+    await enterValue(css('.new-todo'), 'test')
+    await enterValue(css('.new-todo'), 'test')
+    await css('.todo:nth-child(2) .toggle').click()
+    await css('.todo:nth-child(3) .toggle').click()
+
+    // active filter
+    await css('.filters li:nth-child(2) a').click()
+
+    await expect.element(css('.todo')).toHaveLength(1)
+    expect(css('.todo.completed')).toHaveLength(0)
+    // add item with filter active
+    await enterValue(css('.new-todo'), 'test')
+    expect(css('.todo')).toHaveLength(2)
+
+    // completed filter
+    await css('.filters li:nth-child(3) a').click()
+
+    await expect.element(css('.todo')).toHaveLength(2)
+    expect(css('.todo.completed')).toHaveLength(2)
+
+    // filter on page load
+    location.hash = '#active'
+
+    await expect.element(css('.todo.completed')).toHaveLength(0)
+    await expect.element(css('.todo')).toHaveLength(2)
+    expect(css('.todo-count strong')).toHaveTextContent('2')
+
+    // completed on page load
+    location.hash = '#completed'
+
+    // expect.element().toHaveLength(0) will also pass here
+    // because it's 0 at the start! make sure we wait the hash change
+    await expect.element(css('.todo.completed')).not.toHaveLength(0)
+    await expect.element(css('.todo')).toHaveLength(2)
+
+    expect(css('.todo.completed')).toHaveLength(2)
+    expect(css('.todo-count strong')).toHaveTextContent('2')
+
+    // toggling with filter active
+    await css('.todo .toggle').first().click()
+    await expect.element(css('.todo')).toHaveLength(1)
+
+    await css('.filters li:nth-child(2) a').click()
+    await expect.element(css('.todo')).toHaveLength(3)
+
+    await css('.todo .toggle').first().click()
+    await expect.element(css('.todo')).toHaveLength(2)
+
+    // editing triggered by blur
+    await css('.filters li:nth-child(1) a').click()
+    await css('.todo:nth-child(1) label').dblClick()
+
+    await expect.element(css('.todo.editing')).toHaveLength(1)
+    await expect.element(css('.todo:nth-child(1) .edit')).toHaveFocus()
+
+    await css('.todo:nth-child(1) .edit').clear()
+    await userEvent.type(css('.todo:nth-child(1) .edit'), 'edited!')
+    await css('.new-todo').click() // blur
+
+    expect(css('.todo.editing')).toHaveLength(0)
+    expect(css('.todo:nth-child(1) label')).toHaveTextContent('edited!')
+
+    // editing triggered by enter
+    await css('.todo label').first().dblClick()
+    await enterValue(css('.todo:nth-child(1) .edit'), 'edited again!')
+    await expect.element(css('.todo.editing')).toHaveLength(0)
+    await expect
+      .element(css('.todo:nth-child(1) label'))
+      .toHaveTextContent('edited again!')
+
+    // cancel
+    await css('.todo label').first().dblClick()
+    await css('.todo:nth-child(1) .edit').clear()
+    await userEvent.type(css('.todo:nth-child(1) .edit'), 'edited!{escape}')
+
+    await expect.element(css('.todo.editing')).toHaveLength(0)
+    await expect
+      .element(css('.todo:nth-child(1) label'))
+      .toHaveTextContent('edited again!')
+
+    // empty value should remove
+    await css('.todo label').first().dblClick()
+    await enterValue(css('.todo:nth-child(1) .edit'), ' ')
+    await expect.element(css('.todo')).toHaveLength(3)
+
+    // toggle all
+    await css('.toggle-all+label').click()
+    expect(css('.todo.completed')).toHaveLength(3)
+    await css('.toggle-all+label').click()
+    expect(css('.todo:not(.completed)')).toHaveLength(3)
   })
+})
 
-  afterAll(() => {
-    server.close()
-  })
+// no timeout is needed because expect.element awaits
+// const timeout = async (ms: number) => {
+//   await new Promise(resolve => setTimeout(resolve, ms))
+// }
 
-  async function removeItemAt(n: number) {
-    const item = (await page().$('.todo:nth-child(' + n + ')'))!
-    const itemBBox = (await item.boundingBox())!
-    await page().mouse.move(itemBBox.x + 10, itemBBox.y + 10)
-    await click('.todo:nth-child(' + n + ') .destroy')
-  }
-
-  test(
-    'vapor',
-    async () => {
-      const baseUrl = `http://localhost:${port}/todomvc/`
-      await page().goto(baseUrl)
-
-      expect(await isVisible('.main')).toBe(false)
-      expect(await isVisible('.footer')).toBe(false)
-      expect(await count('.filters .selected')).toBe(1)
-      expect(await text('.filters .selected')).toBe('All')
-      expect(await count('.todo')).toBe(0)
-
-      await enterValue('.new-todo', 'test')
-      expect(await count('.todo')).toBe(1)
-      expect(await isVisible('.todo .edit')).toBe(false)
-      expect(await text('.todo label')).toBe('test')
-      expect(await text('.todo-count strong')).toBe('1')
-      expect(await isChecked('.todo .toggle')).toBe(false)
-      expect(await isVisible('.main')).toBe(true)
-      expect(await isVisible('.footer')).toBe(true)
-      expect(await isVisible('.clear-completed')).toBe(false)
-      expect(await value('.new-todo')).toBe('')
-
-      await enterValue('.new-todo', 'test2')
-      expect(await count('.todo')).toBe(2)
-      expect(await text('.todo:nth-child(2) label')).toBe('test2')
-      expect(await text('.todo-count strong')).toBe('2')
-
-      // toggle
-      await click('.todo .toggle')
-      expect(await count('.todo.completed')).toBe(1)
-      expect(await classList('.todo:nth-child(1)')).toContain('completed')
-      expect(await text('.todo-count strong')).toBe('1')
-      expect(await isVisible('.clear-completed')).toBe(true)
-
-      await enterValue('.new-todo', 'test3')
-      expect(await count('.todo')).toBe(3)
-      expect(await text('.todo:nth-child(3) label')).toBe('test3')
-      expect(await text('.todo-count strong')).toBe('2')
-
-      await enterValue('.new-todo', 'test4')
-      await enterValue('.new-todo', 'test5')
-      expect(await count('.todo')).toBe(5)
-      expect(await text('.todo-count strong')).toBe('4')
-
-      // toggle more
-      await click('.todo:nth-child(4) .toggle')
-      await click('.todo:nth-child(5) .toggle')
-      expect(await count('.todo.completed')).toBe(3)
-      expect(await text('.todo-count strong')).toBe('2')
-
-      // remove
-      await removeItemAt(1)
-      expect(await count('.todo')).toBe(4)
-      expect(await count('.todo.completed')).toBe(2)
-      expect(await text('.todo-count strong')).toBe('2')
-      await removeItemAt(2)
-      expect(await count('.todo')).toBe(3)
-      expect(await count('.todo.completed')).toBe(2)
-      expect(await text('.todo-count strong')).toBe('1')
-
-      // remove all
-      await click('.clear-completed')
-      expect(await count('.todo')).toBe(1)
-      expect(await text('.todo label')).toBe('test2')
-      expect(await count('.todo.completed')).toBe(0)
-      expect(await text('.todo-count strong')).toBe('1')
-      expect(await isVisible('.clear-completed')).toBe(false)
-
-      // prepare to test filters
-      await enterValue('.new-todo', 'test')
-      await enterValue('.new-todo', 'test')
-      await click('.todo:nth-child(2) .toggle')
-      await click('.todo:nth-child(3) .toggle')
-
-      // active filter
-      await click('.filters li:nth-child(2) a')
-      await timeout(1)
-      expect(await count('.todo')).toBe(1)
-      expect(await count('.todo.completed')).toBe(0)
-      // add item with filter active
-      await enterValue('.new-todo', 'test')
-      expect(await count('.todo')).toBe(2)
-
-      // completed filter
-      await click('.filters li:nth-child(3) a')
-      await timeout(1)
-      expect(await count('.todo')).toBe(2)
-      expect(await count('.todo.completed')).toBe(2)
-
-      // filter on page load
-      await page().goto(`${baseUrl}#active`)
-      expect(await count('.todo')).toBe(2)
-      expect(await count('.todo.completed')).toBe(0)
-      expect(await text('.todo-count strong')).toBe('2')
-
-      // completed on page load
-      await page().goto(`${baseUrl}#completed`)
-      expect(await count('.todo')).toBe(2)
-      expect(await count('.todo.completed')).toBe(2)
-      expect(await text('.todo-count strong')).toBe('2')
-
-      // toggling with filter active
-      await click('.todo .toggle')
-      expect(await count('.todo')).toBe(1)
-      await click('.filters li:nth-child(2) a')
-      await timeout(1)
-      expect(await count('.todo')).toBe(3)
-      await click('.todo .toggle')
-      expect(await count('.todo')).toBe(2)
-
-      // editing triggered by blur
-      await click('.filters li:nth-child(1) a')
-      await timeout(1)
-      await click('.todo:nth-child(1) label', { clickCount: 2 })
-      expect(await count('.todo.editing')).toBe(1)
-      expect(await isFocused('.todo:nth-child(1) .edit')).toBe(true)
-      await clearValue('.todo:nth-child(1) .edit')
-      await page().type('.todo:nth-child(1) .edit', 'edited!')
-      await click('.new-todo') // blur
-      expect(await count('.todo.editing')).toBe(0)
-      expect(await text('.todo:nth-child(1) label')).toBe('edited!')
-
-      // editing triggered by enter
-      await click('.todo label', { clickCount: 2 })
-      await enterValue('.todo:nth-child(1) .edit', 'edited again!')
-      expect(await count('.todo.editing')).toBe(0)
-      expect(await text('.todo:nth-child(1) label')).toBe('edited again!')
-
-      // cancel
-      await click('.todo label', { clickCount: 2 })
-      await clearValue('.todo:nth-child(1) .edit')
-      await page().type('.todo:nth-child(1) .edit', 'edited!')
-      await page().keyboard.press('Escape')
-      expect(await count('.todo.editing')).toBe(0)
-      expect(await text('.todo:nth-child(1) label')).toBe('edited again!')
-
-      // empty value should remove
-      await click('.todo label', { clickCount: 2 })
-      await enterValue('.todo:nth-child(1) .edit', ' ')
-      expect(await count('.todo')).toBe(3)
-
-      // toggle all
-      await click('.toggle-all+label')
-      expect(await count('.todo.completed')).toBe(3)
-      await click('.toggle-all+label')
-      expect(await count('.todo:not(.completed)')).toBe(3)
-    },
-    E2E_TIMEOUT,
-  )
-})
+async function removeItemAt(n: number) {
+  const item = css(`.todo:nth-child(${n})`)
+  await item.hover()
+  await css(`.todo:nth-child(${n}) .destroy`).click()
+}

packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts

@@ -1,254 +1,231 @@
-import {
-  E2E_TIMEOUT,
-  setupPuppeteer,
-} from '../../../packages/vue/__tests__/e2e/e2eUtils'
-import { startE2ETestServer } from './server'
-const {
-  page,
-  click,
-  text,
-  enterValue,
-  html,
-  transitionStart,
-  waitForElement,
-  nextFrame,
-  timeout,
-} = setupPuppeteer()
-
-let server: Awaited<ReturnType<typeof startE2ETestServer>>
-let port = 0
-beforeAll(async () => {
-  server = await startE2ETestServer('vdomInterop', import.meta.dirname)
-  port = server.port
-})
-afterAll(() => {
-  server.close()
-})
+import { createApp, vaporInteropPlugin } from 'vue'
+import App from '../interop/App.vue'
+import { E2E_TIMEOUT, css } from './e2eUtils'
 
-beforeEach(async () => {
-  const baseUrl = `http://localhost:${port}/interop/`
-  await page().goto(baseUrl)
-  await page().waitForSelector('#app')
-})
+describe('vdom / vapor interop', () => {
+  let app: ReturnType<typeof createApp>
+  beforeEach(() => {
+    app = createApp(App).use(vaporInteropPlugin)
+    app.mount('#app')
+  })
 
-const duration = process.env.CI ? 200 : 50
-const buffer = process.env.CI ? 50 : 20
-const transitionFinish = (time = duration) => timeout(time + buffer)
+  afterEach(() => {
+    app.unmount()
+  })
 
-describe('vdom / vapor interop', () => {
-  test(
-    'should work',
-    async () => {
-      expect(await text('.vapor > h2')).toContain('Vapor component in VDOM')
-
-      expect(await text('.vapor-prop')).toContain('hello')
-
-      const t = await text('.vdom-slot-in-vapor-default')
-      expect(t).toContain('slot prop: slot prop')
-      expect(t).toContain('component prop: hello')
-
-      await click('.change-vdom-slot-in-vapor-prop')
-      expect(await text('.vdom-slot-in-vapor-default')).toContain(
-        'slot prop: changed',
-      )
-
-      expect(await text('.vdom-slot-in-vapor-test')).toContain('A test slot')
-
-      await click('.toggle-vdom-slot-in-vapor')
-      expect(await text('.vdom-slot-in-vapor-test')).toContain(
-        'fallback content',
-      )
-
-      await click('.toggle-vdom-slot-in-vapor')
-      expect(await text('.vdom-slot-in-vapor-test')).toContain('A test slot')
-
-      expect(await text('.vdom > h2')).toContain('VDOM component in Vapor')
-
-      expect(await text('.vdom-prop')).toContain('hello')
-
-      const tt = await text('.vapor-slot-in-vdom-default')
-      expect(tt).toContain('slot prop: slot prop')
-      expect(tt).toContain('component prop: hello')
-
-      await click('.change-vapor-slot-in-vdom-prop')
-      expect(await text('.vapor-slot-in-vdom-default')).toContain(
-        'slot prop: changed',
-      )
-
-      expect(await text('.vapor-slot-in-vdom-test')).toContain('fallback')
-
-      await click('.toggle-vapor-slot-in-vdom-default')
-      expect(await text('.vapor-slot-in-vdom-default')).toContain(
-        'default slot fallback',
-      )
-
-      await click('.toggle-vapor-slot-in-vdom-default')
-
-      await enterValue('input', 'bye')
-      expect(await text('.vapor-prop')).toContain('bye')
-      expect(await text('.vdom-slot-in-vapor-default')).toContain('bye')
-      expect(await text('.vdom-prop')).toContain('bye')
-      expect(await text('.vapor-slot-in-vdom-default')).toContain('bye')
-    },
-    E2E_TIMEOUT,
-  )
-
-  describe('vdom transition', () => {
-    test(
-      'render vapor component',
-      async () => {
-        const btnSelector = '.trans-vapor > button'
-        const containerSelector = '.trans-vapor > div'
-
-        expect(await html(containerSelector)).toBe(`<div>vapor compA</div>`)
-
-        // comp leave
-        expect(
-          (await transitionStart(btnSelector, containerSelector)).innerHTML,
-        ).toBe(
-          `<div class="v-leave-from v-leave-active">vapor compA</div><!---->`,
-        )
-
-        await nextFrame()
-        expect(await html(containerSelector)).toBe(
-          `<div class="v-leave-active v-leave-to">vapor compA</div><!---->`,
-        )
-
-        await transitionFinish()
-        expect(await html(containerSelector)).toBe(`<!---->`)
-
-        // comp enter
-        expect(
-          (await transitionStart(btnSelector, containerSelector)).innerHTML,
-        ).toBe(`<div class="v-enter-from v-enter-active">vapor compA</div>`)
-
-        await nextFrame()
-        expect(await html(containerSelector)).toBe(
-          `<div class="v-enter-active v-enter-to">vapor compA</div>`,
-        )
-
-        await transitionFinish()
-        expect(await html(containerSelector)).toBe(
-          `<div class="">vapor compA</div>`,
-        )
-      },
-      E2E_TIMEOUT,
+  test('should work', { timeout: E2E_TIMEOUT }, async () => {
+    await expect
+      .element(css('.vapor > h2'))
+      .toHaveTextContent('Vapor component in VDOM')
+
+    expect(css('.vapor-prop')).toHaveTextContent('hello')
+
+    const l = css('.vdom-slot-in-vapor-default')
+    expect(l).toHaveTextContent('slot prop: slot prop')
+    expect(l).toHaveTextContent('component prop: hello')
+
+    await css('.change-vdom-slot-in-vapor-prop').click()
+    expect(css('.vdom-slot-in-vapor-default')).toHaveTextContent(
+      'slot prop: changed',
+    )
+
+    expect(css('.vdom-slot-in-vapor-test')).toHaveTextContent('A test slot')
+
+    await css('.toggle-vdom-slot-in-vapor').click()
+    expect(css('.vdom-slot-in-vapor-test')).toHaveTextContent(
+      'fallback content',
     )
 
-    test(
-      'switch between vdom/vapor component (out-in mode)',
-      async () => {
-        const btnSelector = '.trans-vdom-vapor-out-in > button'
-        const containerSelector = '.trans-vdom-vapor-out-in > div'
-        const childSelector = `${containerSelector} > div`
-
-        expect(await html(containerSelector)).toBe(`<div>vdom comp</div>`)
-
-        // switch to vapor comp
-        // vdom comp leave
-        expect(
-          (await transitionStart(btnSelector, containerSelector)).innerHTML,
-        ).toBe(
-          `<div class="fade-leave-from fade-leave-active">vdom comp</div><!---->`,
-        )
-
-        await nextFrame()
-        expect(await html(containerSelector)).toBe(
-          `<div class="fade-leave-active fade-leave-to">vdom comp</div><!---->`,
-        )
-
-        // vapor comp enter
-        await waitForElement(childSelector, 'vapor compA', [
-          'fade-enter-from',
-          'fade-enter-active',
-        ])
-
-        await nextFrame()
-        expect(await html(containerSelector)).toBe(
-          `<div class="fade-enter-active fade-enter-to">vapor compA</div>`,
-        )
-
-        await transitionFinish()
-        expect(await html(containerSelector)).toBe(
-          `<div class="">vapor compA</div>`,
-        )
-
-        // switch to vdom comp
-        // vapor comp leave
-        expect(
-          (await transitionStart(btnSelector, containerSelector)).innerHTML,
-        ).toBe(
-          `<div class="fade-leave-from fade-leave-active">vapor compA</div><!---->`,
-        )
-
-        await nextFrame()
-        expect(await html(containerSelector)).toBe(
-          `<div class="fade-leave-active fade-leave-to">vapor compA</div><!---->`,
-        )
-
-        // vdom comp enter
-        await waitForElement(childSelector, 'vdom comp', [
-          'fade-enter-from',
-          'fade-enter-active',
-        ])
-
-        await nextFrame()
-        expect(await html(containerSelector)).toBe(
-          `<div class="fade-enter-active fade-enter-to">vdom comp</div>`,
-        )
-
-        await transitionFinish()
-        expect(await html(containerSelector)).toBe(
-          `<div class="">vdom comp</div>`,
-        )
-      },
-      E2E_TIMEOUT,
+    await css('.toggle-vdom-slot-in-vapor').click()
+    expect(css('.vdom-slot-in-vapor-test')).toHaveTextContent('A test slot')
+
+    expect(css('.vdom > h2')).toHaveTextContent('VDOM component in Vapor')
+
+    expect(css('.vdom-prop')).toHaveTextContent('hello')
+
+    const tt = css('.vapor-slot-in-vdom-default')
+    expect(tt).toHaveTextContent('slot prop: slot prop')
+    expect(tt).toHaveTextContent('component prop: hello')
+
+    await css('.change-vapor-slot-in-vdom-prop').click()
+    expect(css('.vapor-slot-in-vdom-default')).toHaveTextContent(
+      'slot prop: changed',
     )
-  })
 
-  describe('vdom transition-group', () => {
-    test(
-      'render vapor component',
-      async () => {
-        const btnSelector = '.trans-group-vapor > button'
-        const containerSelector = '.trans-group-vapor > div'
-
-        expect(await html(containerSelector)).toBe(
-          `<div><div>a</div></div>` +
-            `<div><div>b</div></div>` +
-            `<div><div>c</div></div>`,
-        )
-
-        // insert
-        expect(
-          (await transitionStart(btnSelector, containerSelector)).innerHTML,
-        ).toBe(
-          `<div><div>a</div></div>` +
-            `<div><div>b</div></div>` +
-            `<div><div>c</div></div>` +
-            `<div class="test-enter-from test-enter-active"><div>d</div></div>` +
-            `<div class="test-enter-from test-enter-active"><div>e</div></div>`,
-        )
-
-        await nextFrame()
-        expect(await html(containerSelector)).toBe(
-          `<div><div>a</div></div>` +
-            `<div><div>b</div></div>` +
-            `<div><div>c</div></div>` +
-            `<div class="test-enter-active test-enter-to"><div>d</div></div>` +
-            `<div class="test-enter-active test-enter-to"><div>e</div></div>`,
-        )
-
-        await transitionFinish()
-        expect(await html(containerSelector)).toBe(
-          `<div><div>a</div></div>` +
-            `<div><div>b</div></div>` +
-            `<div><div>c</div></div>` +
-            `<div class=""><div>d</div></div>` +
-            `<div class=""><div>e</div></div>`,
-        )
-      },
-      E2E_TIMEOUT,
+    expect(css('.vapor-slot-in-vdom-test')).toHaveTextContent('fallback')
+
+    await css('.toggle-vapor-slot-in-vdom-default').click()
+    expect(css('.vapor-slot-in-vdom-default')).toHaveTextContent(
+      'default slot fallback',
     )
+
+    await css('.toggle-vapor-slot-in-vdom-default').click()
+
+    await css('input').fill('bye')
+    expect(css('.vapor-prop')).toHaveTextContent('bye')
+    expect(css('.vdom-slot-in-vapor-default')).toHaveTextContent('bye')
+    expect(css('.vdom-prop')).toHaveTextContent('bye')
+    expect(css('.vapor-slot-in-vdom-default')).toHaveTextContent('bye')
   })
+
+  // TODO
+
+  // describe('vdom transition', () => {
+  //   test(
+  //     'render vapor component',
+  //     async () => {
+  //       const btnSelector = '.trans-vapor > button'
+  //       const containerSelector = '.trans-vapor > div'
+
+  //       expect(await html(containerSelector)).toBe(`<div>vapor compA</div>`)
+
+  //       // comp leave
+  //       expect(
+  //         (await transitionStart(btnSelector, containerSelector)).innerHTML,
+  //       ).toBe(
+  //         `<div class="v-leave-from v-leave-active">vapor compA</div><!---->`,
+  //       )
+
+  //       await nextFrame()
+  //       expect(await html(containerSelector)).toBe(
+  //         `<div class="v-leave-active v-leave-to">vapor compA</div><!---->`,
+  //       )
+
+  //       await transitionFinish()
+  //       expect(await html(containerSelector)).toBe(`<!---->`)
+
+  //       // comp enter
+  //       expect(
+  //         (await transitionStart(btnSelector, containerSelector)).innerHTML,
+  //       ).toBe(`<div class="v-enter-from v-enter-active">vapor compA</div>`)
+
+  //       await nextFrame()
+  //       expect(await html(containerSelector)).toBe(
+  //         `<div class="v-enter-active v-enter-to">vapor compA</div>`,
+  //       )
+
+  //       await transitionFinish()
+  //       expect(await html(containerSelector)).toBe(
+  //         `<div class="">vapor compA</div>`,
+  //       )
+  //     },
+  //     E2E_TIMEOUT,
+  //   )
+
+  //   test(
+  //     'switch between vdom/vapor component (out-in mode)',
+  //     async () => {
+  //       const btnSelector = '.trans-vdom-vapor-out-in > button'
+  //       const containerSelector = '.trans-vdom-vapor-out-in > div'
+  //       const childSelector = `${containerSelector} > div`
+
+  //       expect(await html(containerSelector)).toBe(`<div>vdom comp</div>`)
+
+  //       // switch to vapor comp
+  //       // vdom comp leave
+  //       expect(
+  //         (await transitionStart(btnSelector, containerSelector)).innerHTML,
+  //       ).toBe(
+  //         `<div class="fade-leave-from fade-leave-active">vdom comp</div><!---->`,
+  //       )
+
+  //       await nextFrame()
+  //       expect(await html(containerSelector)).toBe(
+  //         `<div class="fade-leave-active fade-leave-to">vdom comp</div><!---->`,
+  //       )
+
+  //       // vapor comp enter
+  //       await waitForElement(childSelector, 'vapor compA', [
+  //         'fade-enter-from',
+  //         'fade-enter-active',
+  //       ])
+
+  //       await nextFrame()
+  //       expect(await html(containerSelector)).toBe(
+  //         `<div class="fade-enter-active fade-enter-to">vapor compA</div>`,
+  //       )
+
+  //       await transitionFinish()
+  //       expect(await html(containerSelector)).toBe(
+  //         `<div class="">vapor compA</div>`,
+  //       )
+
+  //       // switch to vdom comp
+  //       // vapor comp leave
+  //       expect(
+  //         (await transitionStart(btnSelector, containerSelector)).innerHTML,
+  //       ).toBe(
+  //         `<div class="fade-leave-from fade-leave-active">vapor compA</div><!---->`,
+  //       )
+
+  //       await nextFrame()
+  //       expect(await html(containerSelector)).toBe(
+  //         `<div class="fade-leave-active fade-leave-to">vapor compA</div><!---->`,
+  //       )
+
+  //       // vdom comp enter
+  //       await waitForElement(childSelector, 'vdom comp', [
+  //         'fade-enter-from',
+  //         'fade-enter-active',
+  //       ])
+
+  //       await nextFrame()
+  //       expect(await html(containerSelector)).toBe(
+  //         `<div class="fade-enter-active fade-enter-to">vdom comp</div>`,
+  //       )
+
+  //       await transitionFinish()
+  //       expect(await html(containerSelector)).toBe(
+  //         `<div class="">vdom comp</div>`,
+  //       )
+  //     },
+  //     E2E_TIMEOUT,
+  //   )
+  // })
+
+  // describe('vdom transition-group', () => {
+  //   test(
+  //     'render vapor component',
+  //     async () => {
+  //       const btnSelector = '.trans-group-vapor > button'
+  //       const containerSelector = '.trans-group-vapor > div'
+
+  //       expect(await html(containerSelector)).toBe(
+  //         `<div><div>a</div></div>` +
+  //           `<div><div>b</div></div>` +
+  //           `<div><div>c</div></div>`,
+  //       )
+
+  //       // insert
+  //       expect(
+  //         (await transitionStart(btnSelector, containerSelector)).innerHTML,
+  //       ).toBe(
+  //         `<div><div>a</div></div>` +
+  //           `<div><div>b</div></div>` +
+  //           `<div><div>c</div></div>` +
+  //           `<div class="test-enter-from test-enter-active"><div>d</div></div>` +
+  //           `<div class="test-enter-from test-enter-active"><div>e</div></div>`,
+  //       )
+
+  //       await nextFrame()
+  //       expect(await html(containerSelector)).toBe(
+  //         `<div><div>a</div></div>` +
+  //           `<div><div>b</div></div>` +
+  //           `<div><div>c</div></div>` +
+  //           `<div class="test-enter-active test-enter-to"><div>d</div></div>` +
+  //           `<div class="test-enter-active test-enter-to"><div>e</div></div>`,
+  //       )
+
+  //       await transitionFinish()
+  //       expect(await html(containerSelector)).toBe(
+  //         `<div><div>a</div></div>` +
+  //           `<div><div>b</div></div>` +
+  //           `<div><div>c</div></div>` +
+  //           `<div class=""><div>d</div></div>` +
+  //           `<div class=""><div>e</div></div>`,
+  //       )
+  //     },
+  //     E2E_TIMEOUT,
+  //   )
+  // })
 })

packages/runtime-core/__tests__/componentPublicInstance.spec.ts

@@ -336,11 +336,12 @@ describe('component: proxy', () => {
     instanceProxy.toggle()
     expect(getCalledTimes).toEqual(2)
 
-    // attaching spy, triggers the getter once, and override the property.
+    // attaching spy, triggers the getter once, cache it and override the property.
     // also uses Object.defineProperty
     const spy = vi.spyOn(instanceProxy, 'toggle')
     expect(getCalledTimes).toEqual(3)
 
+    // expect getter to not evaluate the jest spy caches its value
     const v3 = instanceProxy.toggle()
     expect(v3).toEqual('b')
     expect(spy).toHaveBeenCalled()

scripts/setup-vitest.ts

@@ -1,8 +1,7 @@
 import type { MockInstance } from 'vitest'
 
 declare module 'vitest' {
-  interface Assertion<T = any> extends CustomMatchers<T> {}
-  interface AsymmetricMatchersContaining extends CustomMatchers {}
+  interface Matchers<T = any> extends CustomMatchers<T> {}
 }
 
 interface CustomMatchers<R = unknown> {

vite.config.ts

@@ -1,6 +1,9 @@
 import { configDefaults } from 'vitest/config'
 import { defineConfig } from 'vite-plus'
 import { entries } from './scripts/aliases.js'
+import { playwright } from '@vitest/browser-playwright'
+
+const includeVaporBrowserE2E = process.env.VUE_INCLUDE_VAPOR_BROWSER_E2E === '1'
 
 export default defineConfig({
   define: {
@@ -92,15 +95,58 @@ export default defineConfig({
           include: ['packages/vue/__tests__/e2e/*.spec.ts'],
         },
       },
+      // TODO: merge all vapor e2e tests into browser tests and remove this project
       {
         extends: true,
         test: {
           name: 'e2e-vapor',
           isolate: true,
           include: ['packages-private/vapor-e2e-test/__tests__/*.spec.ts'],
+          exclude: [
+            'packages-private/vapor-e2e-test/__tests__/todomvc.spec.ts',
+            'packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts',
+          ],
         },
       },
+      // This project pulls in built compiler-sfc output, so keep it out of
+      // unrelated test runs and only enable it for the dedicated e2e script.
+      // @ts-expect-error
+      ...(includeVaporBrowserE2E
+        ? [
+            {
+              extends: './packages-private/vapor-e2e-test/vite.config.ts',
+              root: './packages-private/vapor-e2e-test',
+              test: {
+                globals: true,
+                isolate: true,
+                name: 'e2e-vapor-browser',
+                setupFiles: ['./__tests__/setupBrowser.ts'],
+                browser: {
+                  enabled: true,
+                  provider: playwright({
+                    launchOptions: {
+                      args: process.env.CI
+                        ? ['--no-sandbox', '--disable-setuid-sandbox']
+                        : [],
+                    },
+                  }),
+                  headless: true,
+                  instances: [{ browser: 'chromium' }],
+                },
+                include: [
+                  './__tests__/todomvc.spec.ts',
+                  './__tests__/vdomInterop.spec.ts',
+                ],
+              },
+            },
+          ]
+        : []),
     ],
+    onConsoleLog(log) {
+      if (log.startsWith('You are running a development build of Vue.')) {
+        return false
+      }
+    },
   },
   staged: {
     '*.{js,json}': ['vp fmt --no-error-on-unmatched-pattern'],