test(vue): Add unit test for Vue's Clerk component renderer #7234

wobsoriano · 2025-11-17T15:43:22Z

Description

Adds unit tests for ClerkHostRenderer, the shared component that handles mounting/unmounting for all Vue UI components. Not every Vue component has integration tests, but we want to ensure that mounting Clerk components in Vue works correctly.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

Summary by CodeRabbit

Tests
- Added comprehensive unit test suite for ClerkHostRenderer covering lifecycle management, prop updates, open/close flows, and numerous edge cases to improve component stability and reliability.
Chores
- Added a minimal release metadata entry (no public API or functional changes).

changeset-bot · 2025-11-17T15:43:26Z

🦋 Changeset detected

Latest commit: ee4809e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-11-17T15:43:27Z

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
clerk-js-sandbox	Skipped			Nov 17, 2025 4:28pm

coderabbitai · 2025-11-17T15:43:33Z

Walkthrough

Adds a minimal changeset file and a comprehensive unit test suite for the Vue 3 ClerkHostRenderer component covering lifecycle (mount/unmount), open/close flows, prop updates, edge cases, and timing robustness.

Changes

Cohort / File(s)	Change Summary
Changeset metadata `\.changeset/six-files-tap\.md`	Adds a new changeset file containing delimiter markers (`---`) with no functional or API changes.
ClerkHostRenderer test suite `packages/vue/src/components/__tests__/ClerkHostRenderer.test.ts`	Adds comprehensive unit tests for ClerkHostRenderer: mounts/unmounts, open/close handlers, updateProps and prop-change behavior (including null/undefined/empty and deep changes), idempotency, combinations of handlers, and timing-related edge cases. Uses mocked ClerkLoaded, Vitest spies, Vue Testing Library render/nextTick.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Inspect test coverage for duplicate or missing scenarios across mount/unmount and open/close patterns.
Verify mocks/spies for ClerkLoaded and handler functions are isolated and reset appropriately.
Check timing-related assertions (nextTick/onUnmounted) for reliability across CI environments.
Ensure tests assert expected sequencing and do not rely on flaky timing.

Poem

🐰
I hopped in with tests, ears tall and keen,
Mounts and closes, every case seen.
Props inspected, edge paths explored,
A tiny changeset—no APIs roared.
Hooray for checks where bugs are forewarned!

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding unit tests for Vue's ClerkHostRenderer component, which is the primary focus of the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch rob/vue-component-renderer-test

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 48c8bad and ee4809e.

📒 Files selected for processing (1)

packages/vue/src/components/__tests__/ClerkHostRenderer.test.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: Analyze (javascript-typescript)
GitHub Check: semgrep-cloud-platform/scan
GitHub Check: semgrep-cloud-platform/scan

🔇 Additional comments (9)

packages/vue/src/components/__tests__/ClerkHostRenderer.test.ts (9)

1-13: LGTM!

The imports and mock setup are appropriate for Vue 3 component testing. The ClerkLoaded mock correctly renders children via slots.

26-65: LGTM!

These tests correctly verify that the component mounts with the proper portal ref and initial props.

89-204: LGTM!

These tests correctly validate prop updates, multiple updates, and idempotent mounting behavior.

206-224: LGTM!

Gracefully handles missing mount/unmount functions without errors.

235-252: LGTM!

Correctly verifies the component opens with the provided props.

274-292: LGTM!

Correctly handles missing open/close functions gracefully.

303-338: LGTM!

These tests correctly verify mounting happens after ref setup and that updates are skipped when updateProps is not provided.

340-414: LGTM!

These edge case tests correctly handle null/undefined props, deep prop changes, and empty props objects.

416-432: LGTM!

Correctly verifies that both mount and open functions can coexist and are called independently.

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

pkg-pr-new · 2025-11-17T15:48:54Z

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7234

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7234

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7234

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7234

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7234

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7234

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7234

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@7234

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7234

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7234

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7234

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7234

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7234

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7234

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@7234

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7234

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7234

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7234

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7234

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7234

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7234

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7234

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7234

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7234

commit: ee4809e

coderabbitai

Actionable comments posted: 5

🧹 Nitpick comments (1)

packages/vue/src/components/__tests__/ClerkHostRenderer.test.ts (1)

26-66: Consider consolidating redundant mount tests.

Both tests validate the same mounting behavior with different prop shapes. Consider combining them or using it.each to reduce duplication.

Example refactor:

it.each([
  {
    name: 'appearance props',
    props: { appearance: { elements: { rootBox: 'test-class' } } },
  },
  {
    name: 'component props',
    props: { transferable: true, withSignUp: true },
  },
])('mounts component with $name', async ({ props }) => {
  render(ClerkHostRenderer, {
    props: { mount: mockMount, props },
  });

  await nextTick();

  expect(mockMount).toHaveBeenCalledTimes(1);
  expect(mockMount).toHaveBeenCalledWith(expect.any(HTMLDivElement), props);
});

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 00291bc and 48c8bad.

📒 Files selected for processing (2)

.changeset/six-files-tap.md (1 hunks)
packages/vue/src/components/__tests__/ClerkHostRenderer.test.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: Build Packages
GitHub Check: Formatting | Dedupe | Changeset
GitHub Check: semgrep-cloud-platform/scan

🔇 Additional comments (5)

packages/vue/src/components/__tests__/ClerkHostRenderer.test.ts (5)

1-12: LGTM!

The imports and mock setup are clean and appropriate. The ClerkLoaded mock correctly renders children using slots.

332-348: Good edge case coverage for ref timing.

This test correctly verifies that mount only occurs after the ref is set, addressing a potential race condition.

350-373: LGTM!

Good test for graceful degradation when optional updateProps is not provided.

390-452: LGTM!

These tests properly validate deep prop changes and empty prop objects, ensuring the component handles various prop shapes correctly.

454-471: Good coverage for dual pattern usage.

This test ensures both mount and open can coexist, which is valuable for validating flexible component usage.

.changeset/six-files-tap.md

packages/vue/src/components/__tests__/ClerkHostRenderer.test.ts

test(vue): Add unit test for Clerk component renderer

635dfb8

chore: placeholder changeset

48c8bad

clerk-cookie added the vue label Nov 17, 2025

vercel bot deployed to Preview November 17, 2025 15:44 View deployment

coderabbitai bot reviewed Nov 17, 2025

View reviewed changes

apply suggestions

ee4809e

vercel bot temporarily deployed to Preview November 17, 2025 16:28 Inactive

dstaley approved these changes Nov 17, 2025

View reviewed changes

wobsoriano merged commit fca04f0 into main Nov 17, 2025
73 of 77 checks passed

wobsoriano deleted the rob/vue-component-renderer-test branch November 17, 2025 17:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(vue): Add unit test for Vue's Clerk component renderer #7234

test(vue): Add unit test for Vue's Clerk component renderer #7234

Uh oh!

wobsoriano commented Nov 17, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Nov 17, 2025 •

edited

Loading

Uh oh!

vercel bot commented Nov 17, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Nov 17, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Nov 17, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

test(vue): Add unit test for Vue's Clerk component renderer #7234

test(vue): Add unit test for Vue's Clerk component renderer #7234

Uh oh!

Conversation

wobsoriano commented Nov 17, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

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

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wobsoriano commented Nov 17, 2025 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Nov 17, 2025 •

edited

Loading

vercel bot commented Nov 17, 2025 •

edited

Loading

coderabbitai bot commented Nov 17, 2025 •

edited

Loading

pkg-pr-new bot commented Nov 17, 2025 •

edited

Loading