diff --git a/test/components/Collapsible.spec.ts b/test/components/Collapsible.spec.ts
new file mode 100644
index 00000000..34369303
--- /dev/null
+++ b/test/components/Collapsible.spec.ts
@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest'
+import Collapsible, { type CollapsibleProps } from '../../src/runtime/components/Collapsible.vue'
+import ComponentRender from '../component-render'
+
+describe('Collapsible', () => {
+  it.each([
+    ['basic case', { props: { open: true }, slots: { default: () => 'Click me', content: () => 'Collapsible content' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CollapsibleProps, slots?: any }) => {
+    const html = await ComponentRender(nameOrHtml, options, Collapsible)
+    expect(html).toMatchSnapshot()
+  })
+})
\ No newline at end of file
diff --git a/test/components/__snapshots__/Collapsible.spec.ts.snap b/test/components/__snapshots__/Collapsible.spec.ts.snap
new file mode 100644
index 00000000..2f9361c9
--- /dev/null
+++ b/test/components/__snapshots__/Collapsible.spec.ts.snap
@@ -0,0 +1,6 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Collapsible > renders basic case correctly 1`] = `
+"<div data-state="open">Click me<div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="radix-vue-collapsible-content-1" data-state="open" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;">Collapsible content</div>
+</div>"
+`;