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 @@
+
+
+ Css Module
+
+
+
+
+
+
+
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