test(vapor): use browser mode instead of pupeteer to run tests by sheremet-va · Pull Request #13934 · vuejs/core

sheremet-va · 2025-09-26T15:21:44Z

This PR rewrites the tests for Vue Vapor mode to use Vitest Browser Mode. The logic of the test stayed the same, although it maybe also good to rewrite some of it or split it into separate tests. There are no big noticeable changes in speed.

Happy to get any feedback.

If there is desire, I can also update older e2e tests.

Running tests with --browser.headless=false also shows Vitest UI:

coderabbitai · 2025-09-26T15:21:52Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 75a323d7-76a3-4e3f-ac90-5c1c008f0875

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

sheremet-va · 2025-09-26T15:22:47Z

+  test('vapor', { timeout: E2E_TIMEOUT }, async () => {
+    createVaporApp(App).mount('#app')
+
+    expect(css('.main')).not.toBeVisible()


Technically it's always better to use expect.element(locator).not.toBeVisible(), but prettier changes this 1 line into 3, so I kept more error prone version for esthetic reasons. I wonder if we can improve this on Vitest side.

sheremet-va · 2025-09-26T15:23:27Z

-      .use(sirv(path.resolve(import.meta.dirname, '../dist')))
-      .listen(port)
-    process.on('SIGTERM', () => server && server.close())
+  test('vapor', { timeout: E2E_TIMEOUT }, async () => {


Putting timeout here makes prettier format the test body with indentation of 2 instead of 4, although maybe it's even better to move the timeout to the config.

sheremet-va · 2025-09-26T15:24:34Z

      },
      {
-        extends: true,
+        extends: './packages-private/vapor-e2e-test/vite.config.ts',


The test config reuses the Vite config from a private repo instead of the main one (so, aliases and defines are not actually inherited, but tests seem to run ok...)

github-actions · 2025-09-28T01:52:04Z

Size Report

Bundles

File	Size	Gzip	Brotli
compiler-dom.global.prod.js	86.4 kB	30.2 kB	26.6 kB
runtime-dom.global.prod.js	111 kB	41.9 kB	37.5 kB
vue.global.prod.js	170 kB	61.7 kB	55 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	50.6 kB	19.8 kB	18 kB
createApp	59.6 kB	23.1 kB	21 kB
createApp + vaporInteropPlugin	85.9 kB	31.8 kB	28.7 kB
createVaporApp	28.8 kB (+113 B)	11.2 kB (+46 B)	10.2 kB (+45 B)
createSSRApp	63.9 kB	24.8 kB	22.5 kB
createVaporSSRApp	32.1 kB (+113 B)	12.4 kB (+46 B)	11.4 kB (+36 B)
defineCustomElement	66.2 kB	25.1 kB	22.8 kB
defineVaporCustomElement	39.5 kB (+113 B)	14.6 kB (+47 B)	13.4 kB (+50 B)
overall	74.5 kB	28.4 kB	25.8 kB

pkg-pr-new · 2025-09-28T01:52:20Z

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@13934

npm i https://pkg.pr.new/@vue/compiler-core@13934

yarn add https://pkg.pr.new/@vue/compiler-core@13934.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@13934

npm i https://pkg.pr.new/@vue/compiler-dom@13934

yarn add https://pkg.pr.new/@vue/compiler-dom@13934.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@13934

npm i https://pkg.pr.new/@vue/compiler-sfc@13934

yarn add https://pkg.pr.new/@vue/compiler-sfc@13934.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@13934

npm i https://pkg.pr.new/@vue/compiler-ssr@13934

yarn add https://pkg.pr.new/@vue/compiler-ssr@13934.tgz

@vue/compiler-vapor

pnpm add https://pkg.pr.new/@vue/compiler-vapor@13934

npm i https://pkg.pr.new/@vue/compiler-vapor@13934

yarn add https://pkg.pr.new/@vue/compiler-vapor@13934.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@13934

npm i https://pkg.pr.new/@vue/reactivity@13934

yarn add https://pkg.pr.new/@vue/reactivity@13934.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@13934

npm i https://pkg.pr.new/@vue/runtime-core@13934

yarn add https://pkg.pr.new/@vue/runtime-core@13934.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@13934

npm i https://pkg.pr.new/@vue/runtime-dom@13934

yarn add https://pkg.pr.new/@vue/runtime-dom@13934.tgz

@vue/runtime-vapor

pnpm add https://pkg.pr.new/@vue/runtime-vapor@13934

npm i https://pkg.pr.new/@vue/runtime-vapor@13934

yarn add https://pkg.pr.new/@vue/runtime-vapor@13934.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@13934

npm i https://pkg.pr.new/@vue/server-renderer@13934

yarn add https://pkg.pr.new/@vue/server-renderer@13934.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@13934

npm i https://pkg.pr.new/@vue/shared@13934

yarn add https://pkg.pr.new/@vue/shared@13934.tgz

vue

pnpm add https://pkg.pr.new/vue@13934

npm i https://pkg.pr.new/vue@13934

yarn add https://pkg.pr.new/vue@13934.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@13934

npm i https://pkg.pr.new/@vue/compat@13934

yarn add https://pkg.pr.new/@vue/compat@13934.tgz

commit: 59e7c77

edison1105 · 2025-09-28T02:09:09Z

I've actually been planning to switch e2e tests to vitest browser mode too, but I haven't done it yet since vitest browser mode is still experimental. I have a question: after switching to vitest browser mode, does the e2e test execution time increase or decrease? If the difference isn't too significant, I think this PR is worthwhile.

sheremet-va · 2025-09-28T12:02:31Z

have a question: after switching to vitest browser mode, does the e2e test execution time increase or decrease? If the difference isn't too significant, I think this PR is worthwhile.

The time is unpredictable with the previous approach for me, the first time it's ~2s, the second time ~1,5s. The browser mode runs for 2s (the MVC test is always 1,5s unlike with pupeteer where it's either 1,5s or 700ms). I think it might be because the previous setup was modifying the DOM directly (by setting input.value or doing a element.click() instead of using CDP which is slower). If we keep the previous implementation, I think the time will be the same, if not a little bit faster.

edison1105 · 2025-09-28T13:38:15Z

@sheremet-va
Sounds good to me. Let's move all e2e tests to vitest browser mode.

sheremet-va · 2025-10-13T16:22:38Z

I will come back to this PR at some point. @edison1105 right now I am struggling with running unit tests in Vitest beta. It seems like BaseTransition.spec.ts is failing with the latest version (it's not the only test that fails) and I am not sure why. It seems like something was introduce in Vitest (probably related to spying) that is causing this. Can you help me debug it?

edison1105 · 2025-10-14T02:40:21Z

@sheremet-va
I'll take a look later

edison1105 · 2025-10-23T08:19:16Z

+export function nextFrame() {
+  // this page is not same as Playwright's page
+  // how to wait for the next frame?
+  return page.evaluate(() => {


@sheremet-va
I merged the latest code of minor into the current branch, but I encountered a problem and don't know how to solve it. this page is not same as Playwright's page. how to wait for the next frame? I couldn't find a solution in the vitest documentation.

sheremet-va · 2025-10-23T09:51:59Z

-        )
+      // comp leave
+      await css(btnSelector).click()
+      expect(css(containerSelector).element().innerHTML).toBe(


Accessing element() is also not a good idea, checking toContainHTML is more resilient

I think it's better to leave the remaining test case refactoring work to you. I'll go and handle other PRS first.

sheremet-va · 2025-10-23T09:59:18Z

The main issue I am having with VItest 4 is that unit tests are failing. Did you have a loot at them yet, @edison1105?

edison1105 · 2025-10-23T13:53:46Z

@sheremet-va

// in vitest 3.2.4
const hook = vi.fn((el, done) => {})
test('hook length', () => {
  expect(hook.length).toBe(2) // true
})

// in vitest 4.x
const hook = vi.fn((el, done) => {})
test('hook length', () => {
  expect(hook.length).toBe(2) // should be 2 but got 0
})

The above difference is the cause of the BaseTransition.spec.ts failed. Internally, Transition uses hook.length to determine whether the animation has ended. If hook.length <= 1, done will be called.

core/packages/runtime-core/src/components/BaseTransition.ts

Lines 360 to 371 in 45547e6

    
           const callAsyncHook = ( 
        
             hook: Hook<(el: any, done: () => void) => void>, 
        
             args: [TransitionElement, () => void], 
        
           ) => { 
        
             const done = args[1] 
        
             callHook(hook, args) 
        
             if (isArray(hook)) { 
        
               if (hook.every(hook => hook.length <= 1)) done() 
        
             } else if (hook.length <= 1) { 
        
               done() 
        
             } 
        
           }

Another test case (componentPublicInstance.spec.ts:348:28) failed. Simply change the 4 to 3. Refer to the comments in L344. (It equals 3 in jest) - You already fixed it via 7e56f8d.

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

Lines 344 to 348 in 45547e6

    
           // vitest does not cache the spy like jest do 
        
           const v3 = instanceProxy.toggle() 
        
           expect(v3).toEqual('b') 
        
           expect(spy).toHaveBeenCalled() 
        
           expect(getCalledTimes).toEqual(4)

sheremet-va · 2025-10-23T14:18:37Z

Another test case (componentPublicInstance.spec.ts:348:28) failed. Simply change the 4 to 3. Refer to the comments in L344. (It equals 3 in jest) - You already fixed it via 7e56f8d.

That one is an expected breaking change, yeah.

The above difference is the cause of the BaseTransition.spec.ts failed. Internally, Transition uses hook.length to determine whether the animation has ended. If hook.length <= 1, done will be called.

Thank you so much for investigating, this is indeed a bug in Vitest!

…yaml

sheremet-va · 2026-03-19T11:32:58Z

Anything I can do to help out here?

edison1105 · 2026-03-21T05:58:44Z

@sheremet-va
I will finish the rest part next week and merge it

…ronment variable

sheremet-va added 2 commits September 26, 2025 17:16

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

a9e429c

fix: return ui package

1663cef

sheremet-va commented Sep 26, 2025

View reviewed changes

fix: still run prepare-e2e-vapor

d9db524

edison1105 added version: minor scope: vapor related to vapor mode labels Sep 28, 2025

edison1105 added 2 commits October 23, 2025 15:20

chore: migrating to Vitest 4.0

7af03b5

chore: Merge branch 'minor' into pr/sheremet-va/13934

379eac1

edison1105 reviewed Oct 23, 2025

View reviewed changes

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

Smrtnyk reviewed Oct 23, 2025

View reviewed changes

Comment thread packages-private/vapor-e2e-test/__tests__/e2eUtils.ts Outdated

sheremet-va commented Oct 23, 2025

View reviewed changes

sheremet-va added 2 commits October 23, 2025 11:57

chore: remove @vitest/browser

b04ee28

fix: update Matchers extension

dd81596

test: fix publicInstance test

7e56f8d

sheremet-va mentioned this pull request Oct 23, 2025

fix(spy): properly inherit implementation's length vitest-dev/vitest#8778

Merged

7 tasks

chore: Merge branch 'minor' into pr/sheremet-va/13934

57cd188

edison1105 added 3 commits November 27, 2025 09:50

chore: update vitest dependencies to latest versions

6cb8436

chore: update vitest to version 4.0.14 in package.json and pnpm-lock.…

8da4595

…yaml

Merge branch 'minor' into test/rewrite-e2e-vapor-to-use-browser-mode

d9f2b25

edison1105 reviewed Feb 9, 2026

View reviewed changes

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

edison1105 added 3 commits March 23, 2026 09:45

chore: update

b4d0a2a

chore: Merge branch 'minor' into pr/sheremet-va/13934

003b0a1

wip: save

3117cb5

edison1105 force-pushed the test/rewrite-e2e-vapor-to-use-browser-mode branch from 6001dc7 to 3117cb5 Compare March 23, 2026 02:13

fix(test): enable vapor browser E2E tests conditionally based on envi…

59e7c77

…ronment variable

edison1105 merged commit 2f5189c into vuejs:minor Mar 23, 2026
14 of 15 checks passed

Uh oh!

Uh oh!

Conversation

sheremet-va commented Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

sheremet-va Sep 26, 2025

Choose a reason for hiding this comment

Uh oh!

sheremet-va Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sheremet-va Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Sep 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Report

Bundles

Usages

Uh oh!

pkg-pr-new Bot commented Sep 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

edison1105 commented Sep 28, 2025

Uh oh!

sheremet-va commented Sep 28, 2025

Uh oh!

edison1105 commented Sep 28, 2025

Uh oh!

sheremet-va commented Oct 13, 2025

Uh oh!

edison1105 commented Oct 14, 2025

Uh oh!

edison1105 Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

sheremet-va Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

edison1105 Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

sheremet-va commented Oct 23, 2025

Uh oh!

edison1105 commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sheremet-va commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

sheremet-va commented Mar 19, 2026

Uh oh!

edison1105 commented Mar 21, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sheremet-va commented Sep 26, 2025 •

edited

Loading

coderabbitai Bot commented Sep 26, 2025 •

edited

Loading

sheremet-va Sep 26, 2025 •

edited

Loading

sheremet-va Sep 26, 2025 •

edited

Loading

github-actions Bot commented Sep 28, 2025 •

edited

Loading

pkg-pr-new Bot commented Sep 28, 2025 •

edited

Loading

edison1105 commented Oct 23, 2025 •

edited

Loading

sheremet-va commented Oct 23, 2025 •

edited

Loading