unit test for combo box component

src/Components/Input/ComboBoxInput.spec.tsx

@@ -0,0 +1,32 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+
+import ComboBoxInput from './ComboBoxInput'
+
+describe('<ComboBoxInput />', () => {
+  let wrapper: ReturnType<typeof render>
+
+  const updateFormValue = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    wrapper = render(
+      <ComboBoxInput
+        value={'option-1'}
+        onValueChange={updateFormValue}
+        options={['Option 1', 'Option 2']}
+      />,
+    )
+  })
+
+  it('renders properly', () => {
+    expect(wrapper.container.firstChild).toMatchSnapshot()
+  })
+
+  describe('handleChange', () => {
+    it('calls updateFormValue with new value', () => {
+      fireEvent.change(screen.getByRole('combobox'), { target: { value: 'Option 2' } })
+      expect(updateFormValue).toBeCalledWith('Option 2')
+    })
+  })
+})

src/Components/Input/__snapshots__/ComboBoxInput.spec.tsx.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<ComboBoxInput /> > renders properly 1`] = `
+<select
+  class="tw-form-select tw-block tw-w-full tw-py-2 tw-px-4 tw-border tw-border-gray-300 rounded-md tw-shadow-sm tw-text-sm focus:tw-outline-none focus:tw-ring-indigo-500 focus:tw-border-indigo-500 sm:tw-text-sm"
+>
+  <option
+    value="Option 1"
+  >
+    Option 1
+  </option>
+  <option
+    value="Option 2"
+  >
+    Option 2
+  </option>
+</select>
+`;