Transition and TransitionGroup e2e tests seem intermittent

[jrmuizel]

Vue version

main @ 2921685

Link to minimal reproduction

https://github.com/vuejs/core

Steps to reproduce

run pnpm run test-e2e on macos

What is expected?

No test failures

What is actually happening?

Intermittent failures like:

AssertionError: expected '<div class="test">a</div><div class="…' to be '<div class="test test-appear-active t…' // Object.is equality

Expected: "<div class="test test-appear-active test-appear-to">a</div><div class="test test-appear-active test-appear-to">b</div><div class="test test-appear-active test-appear-to">c</div>"
Received: "<div class="test">a</div><div class="test">b</div><div class="test">c</div>"

 ❯ packages/vue/__tests__/e2e/TransitionGroup.spec.ts:449:40
    447|       await nextFrame()
    448|       expect(afterAppearSpy).not.toBeCalled()
    449|       expect(await html('#container')).toBe(
       |                                        ^
    450|         `<div class="test test-appear-active test-appear-to">a</div>` +
    451|           `<div class="test test-appear-active test-appear-to">b</div>` +

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed | 11 passed (12)
      Tests  1 failed | 87 passed (88)
   Start at  15:08:21
   Duration  21.94s (transform 1.09s, setup 49ms, collect 4.41s, tests 47.02s, environment 2.77s, prepare 532ms)

 FAIL  Tests failed. Watching for file changes...

and

 FAIL |e2e|  packages/vue/__tests__/e2e/Transition.spec.ts > e2e: Transition > transition with v-if > transition events without appear
AssertionError: expected [ 'test' ] to strictly equal [ 'test', 'test-enter-active', …(1) ]

- Expected
+ Received

  Array [
    "test",
-   "test-enter-active",
-   "test-enter-to",
  ]

 ❯ packages/vue/__tests__/e2e/Transition.spec.ts:355:42
    353|         expect(afterEnterSpy).not.toBeCalled()
    354|         await nextFrame()
    355|         expect(await classList('.test')).toStrictEqual([
       |                                          ^
    356|           'test',
    357|           'test-enter-active',

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/2]⎯

 FAIL |e2e|  packages/vue/__tests__/e2e/Transition.spec.ts > e2e: Transition > reflow after *-leave-from before *-leave-active
Error: Error: failed to find element matching selector ".test-reflow"
 ❯ CdpElementHandle.$eval node_modules/.pnpm/[email protected]/node_modules/puppeteer-core/src/api/ElementHandle.ts:498:13
 ❯ CdpFrame.$eval node_modules/.pnpm/[email protected]/node_modules/puppeteer-core/src/api/Frame.ts:633:12
 ❯ CdpPage.$eval node_modules/.pnpm/[email protected]/node_modules/puppeteer-core/src/api/Page.ts:1312:12
 ❯ packages/vue/__tests__/e2e/Transition.spec.ts:3028:12
    3026|
    3027|     await nextFrame()
    3028|     expect(await classList('.test-reflow')).toStrictEqual([
       |            ^
    3029|       'test-reflow',
    3030|       'test-reflow-leave-active',

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/2]⎯

 Test Files  1 failed | 11 passed (12)
      Tests  2 failed | 86 passed (88)
   Start at  15:06:29
   Duration  22.04s (transform 1.05s, setup 25ms, collect 3.93s, tests 46.29s, environment 2.78s, prepare 498ms)

 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

System Info

System:
    OS: macOS 15.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 4.45 GB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 23.5.0 - /opt/homebrew/bin/node
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: 9.15.4 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 132.0.6834.110
    Chrome Canary: 134.0.6974.0
    Safari: 18.1
    Safari Technology Preview: 18.0

Any additional comments?

No response

[edison1105]

It is indeed unstable, but running a single test case is generally fine.

[jrmuizel]

Any idea what the cause might be? Are they not waiting for the right amount of time? Should they be waiting for a transitionend event or something like that?