diff --git a/src/components/__tests__/CompletedMilestoneDisplay.spec.ts b/src/components/__tests__/CompletedMilestoneDisplay.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5268d48e5cf25ac141f39d4fcbe31454055cf104
--- /dev/null
+++ b/src/components/__tests__/CompletedMilestoneDisplay.spec.ts
@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils';
+import CompletedMilestoneDisplay from '../milestone/CompletedMilestoneDisplay.vue'
+import { describe, it, expect } from 'vitest'
+import { nextTick } from 'vue'
+
+describe('CompletedMilestoneDisplay', () => {
+  it('renders with props', async () => {
+    const wrapper = mount(CompletedMilestoneDisplay, {
+      props: {
+        id: 1,
+        title: 'Test Title',
+        description: 'Test Description',
+        goalSum: 1000,
+        currentSum: 500,
+        deadline: new Date('2024-05-01'),
+        startDate: new Date('2024-04-01'),
+        image: 'test.jpg'
+      }
+    });
+
+    expect(wrapper.find('.title').text()).toBe('Test Title');
+
+    expect(wrapper.find('.info').exists()).toBe(true);
+    expect(wrapper.find('.info h4').text()).toBe('Du sparte 500kr');
+
+    await wrapper.trigger('mouseover');
+
+    await nextTick();
+
+    expect(wrapper.find('.info').exists()).toBe(true);
+    expect(wrapper.find('.info h4').text()).toBe('Test Description');
+
+    await wrapper.trigger('mouseleave');
+
+    await nextTick();
+
+    expect(wrapper.find('.info').exists()).toBe(true);
+    expect(wrapper.find('.info h4').text()).toBe('Du sparte 500kr');
+  });
+
+});