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 558bd0ae6..49b2ee324 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 152afaab0..116d8686f 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 @@ -133,6 +133,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