fix(runtime-utils): lazily import root-component in mount + render helpers

[yamachi4416]

🔗 Linked issue

resolves #1664

📚 Description

since importing root-component also imports app-component and error-component, changed it to import them only when using mountSuspended or renderSuspended.

Reproduction

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@nuxt/test-utils@1665

npm i https://pkg.pr.new/vitest-environment-nuxt@1665

commit: 53424cb

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes introduce lazy loading of suspended utility modules in mountSuspended and renderSuspended functions, replacing static imports with dynamic imports executed at runtime. A new composable useGlobalComponentMessage is created that returns a message string, which is integrated into the GlobalComponent.global.vue template to render reactive content instead of a fixed string. Tests are added to verify the mock behavior of the new composable using both mountSuspended and renderSuspended utilities.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and specifically describes the main change: making root-component imports lazy in mount and render helpers.
Description check	✅ Passed	The PR description clearly explains the rationale and includes reproduction evidence showing the fix resolves the issue.
Linked Issues check	✅ Passed	The changes directly address issue #1664 by converting static imports to lazy imports in mount.ts and render.ts, preventing eager loading of root-component and its dependencies during test setup.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to addressing the lazy import requirements; the example file changes support testing the fix.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

examples/app-vitest-full/tests/nuxt/mock-nuxt-composable-2.spec.ts (1)

10-26: Good regression coverage for the lazy-import fix.

The two new tests validate that component-level mocks of auto-imported composables take effect under both mountSuspended and renderSuspended, which is exactly the behavior that regresses when root-component is eagerly imported (issue #1664).

One small suggestion: to make the intent of this file closer to the reproduction in #1664, consider also adding a variant where useGlobalComponentMessage is referenced from an error.vue page, so a future regression of the eager-import path is caught directly. Not a blocker — the current tests already exercise the fix path via the global component.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/app-vitest-full/tests/nuxt/mock-nuxt-composable-2.spec.ts` around
lines 10 - 26, Add an extra test that mirrors the regression reproduction by
referencing useGlobalComponentMessage from an error.vue page component to ensure
the lazy-import path remains effective; create or import a simple ErrorPage
component that uses useGlobalComponentMessage, then add async tests using
mountSuspended(ErrorPage) and renderSuspended(ErrorPage) (similar to the
existing GlobalComponent tests) asserting the mocked message is present, so the
behavior around useGlobalComponentMessage, mountSuspended, renderSuspended and
GlobalComponent is also validated when used from an error page.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@examples/app-vitest-full/tests/nuxt/mock-nuxt-composable-2.spec.ts`:
- Around line 10-26: Add an extra test that mirrors the regression reproduction
by referencing useGlobalComponentMessage from an error.vue page component to
ensure the lazy-import path remains effective; create or import a simple
ErrorPage component that uses useGlobalComponentMessage, then add async tests
using mountSuspended(ErrorPage) and renderSuspended(ErrorPage) (similar to the
existing GlobalComponent tests) asserting the mocked message is present, so the
behavior around useGlobalComponentMessage, mountSuspended, renderSuspended and
GlobalComponent is also validated when used from an error page.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 42fdbb47-1f4c-47fa-8980-b5d6df6d9f97

📥 Commits

Reviewing files that changed from the base of the PR and between 3082fc8 and 53424cb.

📒 Files selected for processing (5)

• examples/app-vitest-full/components/GlobalComponent.global.vue
• examples/app-vitest-full/composables/useGlobalComponentMessage.ts
• examples/app-vitest-full/tests/nuxt/mock-nuxt-composable-2.spec.ts
• src/runtime-utils/mount.ts
• src/runtime-utils/render.ts