diff --git a/tests/unit/design-system/components/menu-item/MenuItem.spec.jsx b/tests/unit/design-system/components/menu-item/MenuItem.spec.jsx
new file mode 100644
index 000000000..5d2368c89
--- /dev/null
+++ b/tests/unit/design-system/components/menu-item/MenuItem.spec.jsx
@@ -0,0 +1,74 @@
+import { render, fireEvent, screen } from '@testing-library/react'
+import MenuItem from '~scss-components/menu-item/MenuItem'
+
+const resourceMenuItemTitle = 'Lesson'
+
+const icon =
+
+const checkbox =
+
+const additionalInfo = 'This is a lesson'
+
+describe('MenuItem Component', () => {
+ test('should render menu item', () => {
+ render()
+ expect(screen.getByText(resourceMenuItemTitle)).toBeInTheDocument()
+ })
+
+ test('should call onClick when menu item is clicked', () => {
+ const onClick = vi.fn()
+ render()
+ fireEvent.click(screen.getByText(resourceMenuItemTitle))
+ expect(onClick).toHaveBeenCalled()
+ })
+
+ test('should render svg graphics', () => {
+ render()
+ expect(screen.getByTestId('lesson-icon')).toBeInTheDocument()
+ })
+
+ test('should render checkbox', () => {
+ render()
+ expect(screen.getByRole('checkbox')).toBeInTheDocument()
+ })
+
+ test('should check checkbox when menu item clicked', () => {
+ render()
+ fireEvent.click(screen.getByText(resourceMenuItemTitle))
+ expect(screen.getByRole('checkbox')).toBeChecked()
+ })
+
+ test('should display close button when removal is enabled', () => {
+ const { container } = render(
+