From 27a652c54fb7b42553ad5521db9a010c6169f0a5 Mon Sep 17 00:00:00 2001 From: yamachi4416 Date: Sat, 25 Oct 2025 18:22:00 +0900 Subject: [PATCH] feat(runtime-utils): allow mountSuspended, renderSuspended to work with use css modules component --- .../components/ComponentWithCssVar.vue | 23 +++++++++++++++++++ .../tests/nuxt/mount-suspended.spec.ts | 9 ++++++++ .../tests/nuxt/render-suspended.spec.ts | 9 ++++++++ src/runtime-utils/mount.ts | 3 ++- src/runtime-utils/render.ts | 3 ++- 5 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 examples/app-vitest-full/components/ComponentWithCssVar.vue diff --git a/examples/app-vitest-full/components/ComponentWithCssVar.vue b/examples/app-vitest-full/components/ComponentWithCssVar.vue new file mode 100644 index 000000000..eee22d89c --- /dev/null +++ b/examples/app-vitest-full/components/ComponentWithCssVar.vue @@ -0,0 +1,23 @@ + + + diff --git a/examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts b/examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts index 109910277..d728866d8 100644 --- a/examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts +++ b/examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts @@ -25,6 +25,7 @@ import ComponentWithAttrs from '~/components/ComponentWithAttrs.vue' import ComponentWithReservedProp from '~/components/ComponentWithReservedProp.vue' import ComponentWithReservedState from '~/components/ComponentWithReservedState.vue' import ComponentWithImports from '~/components/ComponentWithImports.vue' +import ComponentWithCssVar from '~/components/ComponentWithCssVar.vue' import GenericStateComponent from '~/components/GenericStateComponent.vue' import { BoundAttrs } from '#components' @@ -275,6 +276,14 @@ describe('mountSuspended', () => { }) }) + it('can mount components with use css modules', async () => { + const component = await mountSuspended(ComponentWithCssVar) + expect(component.text()).toBe('Css Module') + expect(component.find('#s1').classes()).toHaveLength(1) + expect(component.find('#s2').classes()).toHaveLength(1) + expect(component.find('#s3').classes()).toHaveLength(0) + }) + describe('Options API', () => { beforeEach(() => { vi.spyOn(console, 'error').mockImplementation((message) => { diff --git a/examples/app-vitest-full/tests/nuxt/render-suspended.spec.ts b/examples/app-vitest-full/tests/nuxt/render-suspended.spec.ts index fd94dfa83..c80dda8c5 100644 --- a/examples/app-vitest-full/tests/nuxt/render-suspended.spec.ts +++ b/examples/app-vitest-full/tests/nuxt/render-suspended.spec.ts @@ -12,6 +12,7 @@ import DirectiveComponent from '~/components/DirectiveComponent.vue' import ExportDefaultComponent from '~/components/ExportDefaultComponent.vue' import ExportDefineComponent from '~/components/ExportDefineComponent.vue' import ComponentWithAttrs from '~/components/ComponentWithAttrs.vue' +import ComponentWithCssVar from '~/components/ComponentWithCssVar.vue' import ExportDefaultWithRenderComponent from '~/components/ExportDefaultWithRenderComponent.vue' import ExportDefaultReturnsRenderComponent from '~/components/ExportDefaultReturnsRenderComponent.vue' import OptionsApiPage from '~/pages/other/options-api.vue' @@ -170,6 +171,14 @@ describe('renderSuspended', () => { }) }) + it('can render components with use css modules', async () => { + const { container, html } = await renderSuspended(ComponentWithCssVar) + expect(html()).toContain('Css Module') + expect(container.querySelector('#s1')?.classList).toHaveLength(1) + expect(container.querySelector('#s2')?.classList).toHaveLength(1) + expect(container.querySelector('#s3')?.classList).toHaveLength(0) + }) + describe('Options API', () => { beforeEach(() => { vi.spyOn(console, 'error').mockImplementation((message) => { diff --git a/src/runtime-utils/mount.ts b/src/runtime-utils/mount.ts index 9dee9386f..085750448 100644 --- a/src/runtime-utils/mount.ts +++ b/src/runtime-utils/mount.ts @@ -66,7 +66,7 @@ export async function mountSuspended( const vueApp = tryUseNuxtApp()?.vueApp // @ts-expect-error untyped global __unctx__ || globalThis.__unctx__.get('nuxt-app').tryUse().vueApp - const { render, setup, data, computed, methods } = component as DefineComponent, Record> + const { render, setup, data, computed, methods, ...componentRest } = component as DefineComponent, Record> let setupContext: SetupContext let setupState: Record @@ -144,6 +144,7 @@ export async function mountSuspended( (resolve) => { const vm = mount( { + __cssModules: componentRest.__cssModules, setup: (props: Record, ctx: SetupContext) => { setupContext = ctx diff --git a/src/runtime-utils/render.ts b/src/runtime-utils/render.ts index da7599e96..bb6b7b359 100644 --- a/src/runtime-utils/render.ts +++ b/src/runtime-utils/render.ts @@ -62,7 +62,7 @@ export async function renderSuspended(component: T, options?: RenderOptions, Record> + const { render, setup, data, computed, methods, ...componentRest } = component as DefineComponent, Record> let setupContext: SetupContext let setupState: SetupState @@ -132,6 +132,7 @@ export async function renderSuspended(component: T, options?: RenderOptions & { setupState: SetupState }>((resolve) => { const utils = renderFromTestingLibrary( { + __cssModules: componentRest.__cssModules, setup: (props: Record, ctx: SetupContext) => { setupContext = ctx