test(vue): Added canary and latest test variants to Vue tests

[logaretm]

This pull request adds new test scripts and Sentry test configuration variants to the vue-3 test application.

The main goal is to enable automated testing of the application against both the latest and canary (alpha) versions of Vue, improving compatibility and early detection of issues with upcoming Vue releases.

Vue has several tags but no single tag is considered the "cutting-edge" of Vue releases. The docs suggest using install-vue tool but none of the suggested tags are suitable:

• canary latest publish is 2 years ago 3.2
• edge covers the main branch and not the latest releases, currently sitting at 3.5.xx
• alpha latest alpha release, already outdated with beta releases are coming through
• beta will be outdated once rc releases start going through
• rc will be outdated once the stable version comes through

So it doesn't feel like there is one good option here, so I opted to instead use git to query the latest tag on the Vue repo and just use that, it's not true canary and it will sometimes install other versions but I'm out of ideas. Happy to hear more thoughts and ideas here!

I will reach out to Vue team members to see if they can make canary live again.

closes #18679

[linear]

JS-1394 Add Vue.js canary E2E tests

[sentry]

Bug: The script to get the latest Vue tag incorrectly includes the ^{} suffix from git ls-remote, which is an invalid version string for pnpm and will cause installation to fail.
_{Severity: HIGH | Confidence: High}

🔍 Detailed Analysis

The test:build-canary script in package.json uses a shell command to find the latest Vue.js tag. The command git ls-remote --tags ... | tail -n1 incorrectly captures the dereferenced annotated tag, which includes a ^{} suffix (e.g., v3.4.15^{}). This string is not a valid version specifier for pnpm. As a result, the subsequent pnpm add vue@... command will fail with a version resolution error, causing the test:build-canary test variant to crash whenever it is executed.

💡 Suggested Fix

Modify the git ls-remote command to prevent capturing the ^{} suffix. One option is to add the --refs flag to only list actual tag references. Alternatively, filter the output to exclude lines ending in ^{}, for example by piping the output through grep -v '{}$' before tail -n1.

🤖 Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: dev-packages/e2e-tests/test-applications/vue-3/package.json#L18

Potential issue: The `test:build-canary` script in `package.json` uses a shell command
to find the latest Vue.js tag. The command `git ls-remote --tags ... | tail -n1`
incorrectly captures the dereferenced annotated tag, which includes a `^{}` suffix
(e.g., `v3.4.15^{}`). This string is not a valid version specifier for `pnpm`. As a
result, the subsequent `pnpm add vue@...` command will fail with a version resolution
error, causing the `test:build-canary` test variant to crash whenever it is executed.

_{Did we get this right? 👍 / 👎 to inform future reviews.
Reference ID: 8109808}

[logaretm]

No, it works well

[Copilot]

Pull request overview

This pull request adds test infrastructure to enable automated testing of the Vue 3 application against both the latest stable version and the most recent tagged version (labeled as "canary") of Vue. This helps catch compatibility issues early with upcoming Vue releases.

Key Changes:

• Added new npm scripts for installing and testing with different Vue versions (test:build-latest, test:build-canary, test:install-canary, test:print-version)
• Added sentryTest configuration with a variants array for the latest Vue version and an optionalVariants array for the canary version
• Modified test:assert to print the Vue version before running tests

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Lms24]

The "canary" strategy sounds fine for me as long as there's no better option. Fwiw, I think we'll face this issue in a few frameworks, so let's see how well it works for Vue.