diff --git a/src/components/Checkbox/Checkbox.test.tsx b/src/components/Checkbox/Checkbox.test.tsx
new file mode 100644
index 0000000..492a24f
--- /dev/null
+++ b/src/components/Checkbox/Checkbox.test.tsx
@@ -0,0 +1,50 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { Checkbox, Label } from '../..';
+import { fireEvent, render, screen } from '../../libs/test';
+
+describe('Checkbox', () => {
+  it('Checkbox icon must be customizable and work when clicked.', () => {
+    render(
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start', lineHeight: '1' }}>
+        <Checkbox
+          id="checkbox-test"
+          role="checkbox-test"
+          iconEl={
+            <svg viewBox="0 0 24 24" role="checkbox-icon">
+              <path d="M5 12l5 5l08 -10"></path>
+            </svg>
+          }
+        />
+        <div>
+          <Label htmlFor="checkbox-with-text" style={{ marginLeft: '0px' }}>
+            Accept terms and conditions
+          </Label>
+          <p style={{ margin: '4px 0px', color: 'gray', fontSize: '0.875rem' }}>
+            You agree to our Terms of Service and Privacy Policy.
+          </p>
+        </div>
+      </div>,
+    );
+
+    const checkbox = screen.getByRole('checkbox-test');
+    expect(checkbox).toBeInTheDocument();
+
+    const checkIcon = document.querySelector('svg[role="checkbox-icon"]');
+    expect(checkIcon).toBeInTheDocument();
+
+    const styledEl = checkIcon?.parentElement;
+    expect(styledEl).toBeInTheDocument();
+
+    if (styledEl) {
+      const beforeBgStyle = styledEl.style.background;
+      fireEvent.click(checkbox);
+
+      expect(styledEl).not.toHaveStyle(`background: ${beforeBgStyle}`);
+    } else {
+      console.error('styledEl is null.');
+    }
+  });
+});
diff --git a/src/components/Checkbox/checkbox.test.tsx b/src/components/Checkbox/checkbox.test.tsx
index 8c56ad5..492a24f 100644
--- a/src/components/Checkbox/checkbox.test.tsx
+++ b/src/components/Checkbox/checkbox.test.tsx
@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-import { Checkbox, Label } from '../../';
+import { Checkbox, Label } from '../..';
 import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Checkbox', () => {
diff --git a/src/components/Dialog/Dialog.test.tsx b/src/components/Dialog/Dialog.test.tsx
new file mode 100644
index 0000000..3641700
--- /dev/null
+++ b/src/components/Dialog/Dialog.test.tsx
@@ -0,0 +1,86 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogToggle,
+  Input,
+  InputDesc,
+  InputGroup,
+  Label,
+} from '../..';
+import { fireEvent, render, screen } from '../../libs/test';
+
+describe('Dialog', () => {
+  it('Should appear DialogContent when click DialogToggle', () => {
+    render(
+      <Dialog>
+        <DialogToggle asChild>
+          <Button
+            variant="outline"
+            onClick={() => {
+              console.log('Event Compose');
+            }}
+          >
+            ToggleButton
+          </Button>
+        </DialogToggle>
+        <DialogContent maxWidth={500} outEvent>
+          <DialogHeader>
+            <DialogTitle>Create project</DialogTitle>
+            <DialogDescription>Great project names are short and memorable.</DialogDescription>
+          </DialogHeader>
+          <InputGroup style={{ margin: '2rem 0rem' }}>
+            <Label htmlFor="project">Project</Label>
+            <Input id="project" />
+            <InputDesc>You can @mention other users to link to them.</InputDesc>
+          </InputGroup>
+          <DialogFooter justify="space-between">
+            <DialogClose asChild>
+              <Button variant="secondary">Close</Button>
+            </DialogClose>
+            <DialogClose asChild>
+              <Button variant="primary">Create</Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>,
+    );
+
+    const toggleBtn = screen.getByText('ToggleButton');
+    expect(toggleBtn).toBeInTheDocument();
+
+    fireEvent.click(toggleBtn);
+
+    const projectLabel = screen.getByLabelText(/project/i);
+    expect(projectLabel).toBeInTheDocument();
+    fireEvent.change(projectLabel, { target: { value: 'blur blur' } });
+
+    const closeBtn = screen.getByText('Close');
+    expect(closeBtn).toBeInTheDocument();
+
+    fireEvent.click(closeBtn);
+
+    expect(projectLabel).not.toBeInTheDocument();
+
+    fireEvent.click(toggleBtn);
+
+    const dialogTitle = screen.getByText('Create project');
+    expect(dialogTitle).toBeInTheDocument();
+
+    const dialogBGs = document.getElementsByClassName('bmates-modal-bg');
+    expect(dialogBGs.length).toBe(1);
+
+    fireEvent.click(dialogBGs[0]);
+
+    expect(closeBtn).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/Dialog/dialog.test.tsx b/src/components/Dialog/dialog.test.tsx
index f1c3a72..3641700 100644
--- a/src/components/Dialog/dialog.test.tsx
+++ b/src/components/Dialog/dialog.test.tsx
@@ -16,7 +16,7 @@ import {
   InputDesc,
   InputGroup,
   Label,
-} from '../../';
+} from '../..';
 import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Dialog', () => {
diff --git a/src/components/Dropdown/Dropdown.test.tsx b/src/components/Dropdown/Dropdown.test.tsx
new file mode 100644
index 0000000..74325f4
--- /dev/null
+++ b/src/components/Dropdown/Dropdown.test.tsx
@@ -0,0 +1,50 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownDivider,
+  DropdownItem,
+  DropdownLabel,
+  DropdownShortcut,
+  DropdownToggle,
+} from '..';
+import { fireEvent, render, screen } from '../../libs/test';
+
+describe('Dropdown', () => {
+  it('Should appear DropdownContent when click DropdownToggle', () => {
+    render(
+      <Dropdown>
+        <DropdownToggle>DropdownToggle</DropdownToggle>
+        <DropdownContent width={'15rem'}>
+          <DropdownLabel>Share Social</DropdownLabel>
+          <DropdownDivider />
+          <DropdownItem>
+            GitHub
+            <DropdownShortcut>⌘+T</DropdownShortcut>
+          </DropdownItem>
+
+          <DropdownItem disabled>Facebook</DropdownItem>
+          <DropdownItem>Twitter</DropdownItem>
+        </DropdownContent>
+      </Dropdown>,
+    );
+
+    const toggleBtn = screen.getByText('DropdownToggle');
+    expect(toggleBtn).toBeInTheDocument();
+
+    fireEvent.click(toggleBtn);
+
+    const dropdownLabel = screen.getByText('Share Social');
+    expect(dropdownLabel).toBeInTheDocument();
+
+    const dropdownItem = screen.getByText('Twitter');
+    expect(dropdownItem).toBeInTheDocument();
+
+    fireEvent.click(dropdownItem);
+
+    expect(dropdownLabel).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/Dropdown/dropdown.test.tsx b/src/components/Dropdown/dropdown.test.tsx
index 8a71ec2..74325f4 100644
--- a/src/components/Dropdown/dropdown.test.tsx
+++ b/src/components/Dropdown/dropdown.test.tsx
@@ -10,7 +10,7 @@ import {
   DropdownLabel,
   DropdownShortcut,
   DropdownToggle,
-} from '../';
+} from '..';
 import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Dropdown', () => {
diff --git a/src/components/Input/Input.test.tsx b/src/components/Input/Input.test.tsx
new file mode 100644
index 0000000..777db1d
--- /dev/null
+++ b/src/components/Input/Input.test.tsx
@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { expect, it } from 'vitest';
+
+import { Input, InputGroup, Label } from '../..';
+import { fireEvent, render, screen } from '../../libs/test';
+
+describe('Input', () => {
+  it('Fill out the Input', async () => {
+    render(
+      <InputGroup>
+        <Label htmlFor="email">Email</Label>
+        <Input id="email" type="email" placeholder="email" />
+      </InputGroup>,
+      {},
+    );
+    const emailValue = 'bandmator@bandmate.com';
+    const emailInput = screen.getByLabelText(/email/i);
+
+    fireEvent.change(emailInput, { target: { value: emailValue } });
+
+    expect(emailInput).toHaveValue(emailValue);
+  });
+});
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
new file mode 100644
index 0000000..36025c8
--- /dev/null
+++ b/src/components/Select/Select.test.tsx
@@ -0,0 +1,111 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { Select, SelectContent, SelectDivider, SelectItem, SelectLabel, SelectToggle } from '..';
+import { fireEvent, render, screen } from '../../libs/test';
+
+const items = [
+  {
+    label: 'Cat',
+    value: 'cat',
+  },
+  {
+    label: 'Dog',
+    value: 'dog',
+  },
+  {
+    label: 'Fox',
+    value: 'fox',
+  },
+  {
+    label: 'Nilgai',
+    value: 'nilgai',
+  },
+  {
+    label: 'Numbird',
+    value: 'nunbird',
+    disabled: true,
+  },
+];
+
+describe('Select', () => {
+  it('Should appear SelectContent when click SelectToggle', () => {
+    render(
+      <Select align="start">
+        <SelectToggle>SelectToggle</SelectToggle>
+        <SelectContent width={'15rem'}>
+          <SelectLabel>Animals</SelectLabel>
+          <SelectDivider />
+          {items.map(item => (
+            <SelectItem key={item.value} value={item.value} disabled={item.disabled}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>,
+    );
+
+    const toggleBtn = screen.getByText('SelectToggle');
+    expect(toggleBtn).toBeInTheDocument();
+
+    // open Select content
+    fireEvent.click(toggleBtn);
+
+    const selectLabel = screen.getByText('Animals');
+    expect(selectLabel).toBeInTheDocument();
+
+    // test whole items.
+    items.forEach(item => {
+      const itemLI = screen.getByText(item.label);
+      expect(itemLI).toBeInTheDocument();
+
+      if (item.disabled == true) {
+        expect(itemLI).toHaveAttribute('disabled');
+      } else expect(itemLI).not.toBeDisabled();
+    });
+
+    // when click item, select content should be closed.
+    fireEvent.click(screen.getByText(items[0].label));
+    expect(selectLabel).not.toBeInTheDocument();
+  });
+
+  it('Multiple Select', () => {
+    render(
+      <Select multi align="center">
+        <SelectToggle>SelectToggle</SelectToggle>
+        <SelectContent width={'15rem'}>
+          <SelectLabel>Animals</SelectLabel>
+          <SelectDivider />
+          {items.map(item => (
+            <SelectItem key={item.value} value={item.value} disabled={item.disabled}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>,
+    );
+
+    const toggleBtn = screen.getByText('SelectToggle');
+    expect(toggleBtn).toBeInTheDocument();
+
+    items.forEach(item => {
+      if (item.disabled) return;
+
+      // open Select content
+      fireEvent.click(toggleBtn);
+
+      const itemLI = screen.getByRole('option', { name: item.label });
+      expect(itemLI).toBeInTheDocument();
+
+      // select item (and close Select content)
+      fireEvent.click(itemLI);
+      // reopen Select content
+      fireEvent.click(toggleBtn);
+
+      // Is Selected?
+      const itemLI2 = screen.getByRole('option', { name: item.label });
+      expect(itemLI2).toHaveAttribute('aria-selected', 'true');
+    });
+  });
+});
diff --git a/src/components/Select/select.test.tsx b/src/components/Select/select.test.tsx
index 0efdd90..36025c8 100644
--- a/src/components/Select/select.test.tsx
+++ b/src/components/Select/select.test.tsx
@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-import { Select, SelectContent, SelectDivider, SelectItem, SelectLabel, SelectToggle } from '../';
+import { Select, SelectContent, SelectDivider, SelectItem, SelectLabel, SelectToggle } from '..';
 import { fireEvent, render, screen } from '../../libs/test';
 
 const items = [
@@ -29,7 +29,7 @@ const items = [
   },
 ];
 
-describe('UI test', () => {
+describe('Select', () => {
   it('Should appear SelectContent when click SelectToggle', () => {
     render(
       <Select align="start">
diff --git a/src/components/Switch/Switch.test.tsx b/src/components/Switch/Switch.test.tsx
new file mode 100644
index 0000000..6f78422
--- /dev/null
+++ b/src/components/Switch/Switch.test.tsx
@@ -0,0 +1,42 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { expect, it } from 'vitest';
+
+import { Switch } from '..';
+import { fireEvent, render, screen } from '../../libs/test';
+
+describe('Switch', () => {
+  it('Should be change checked value when click the Switch', async () => {
+    render(<Switch label="SwitchLabel" id="switch-with-child" />, {});
+
+    const label = screen.getByLabelText(/SwitchLabel/i);
+    expect(label).toBeInTheDocument();
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeInTheDocument();
+
+    // un checked
+    expect(checkbox).not.toBeChecked();
+
+    fireEvent.click(label);
+
+    // checked
+    expect(checkbox).toBeChecked();
+  });
+
+  it('Should be no change when click the Disabled Switch', async () => {
+    render(<Switch label="SwitchLabel" disabled={true} />, {});
+
+    const label = screen.getByLabelText(/SwitchLabel/i);
+    expect(label).toBeInTheDocument();
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeInTheDocument();
+
+    expect(checkbox).not.toBeChecked();
+
+    fireEvent.click(checkbox);
+
+    expect(checkbox).toBeDisabled();
+  });
+});
diff --git a/src/components/Textarea/Textarea.test.tsx b/src/components/Textarea/Textarea.test.tsx
new file mode 100644
index 0000000..1154a6d
--- /dev/null
+++ b/src/components/Textarea/Textarea.test.tsx
@@ -0,0 +1,25 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { expect, it } from 'vitest';
+
+import { InputDesc, InputGroup, Label, Textarea } from '../..';
+import { fireEvent, render, screen } from '../../libs/test';
+
+describe('Textarea', () => {
+  it('Fill out the Textarea', async () => {
+    render(
+      <InputGroup>
+        <Label htmlFor="bio">Bio</Label>
+        <Textarea id="bio" placeholder="bio" />
+        <InputDesc>You can @mention other users to link to them.</InputDesc>
+      </InputGroup>,
+      {},
+    );
+    const bioMsgValue = 'Hi, I am Bandmator';
+    const bioTextarea = screen.getByLabelText(/bio/i);
+
+    fireEvent.change(bioTextarea, { target: { value: bioMsgValue } });
+
+    expect(bioTextarea).toHaveValue(bioMsgValue);
+  });
+});
diff --git a/src/components/Toast/Toast.test.tsx b/src/components/Toast/Toast.test.tsx
new file mode 100644
index 0000000..84b2a87
--- /dev/null
+++ b/src/components/Toast/Toast.test.tsx
@@ -0,0 +1,77 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { expect, it } from 'vitest';
+
+import { Button, Toaster, useToast } from '../..';
+import { fireEvent, render, screen, waitFor } from '../../libs/test';
+import { ToastData } from './type';
+
+const ToastForTest = ({ ...props }: Omit<ToastData, 'toastId'>) => {
+  const { toast } = useToast();
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          toast({ ...props });
+        }}
+      >
+        ToastButton
+      </Button>
+    </>
+  );
+};
+
+describe('Toast', () => {
+  it('Fill out the Textarea', async () => {
+    const toastData = {
+      title: 'Toast Title',
+      description: `When you click Toast, containing 'data' 'action' is executed.`,
+      variant: 'primary',
+      time: 5000,
+      data: 'Hi',
+      action: (data: unknown) => {
+        const el = document.querySelector('#test-action');
+        if (el) {
+          el.className = data as string;
+        }
+      },
+    };
+    render(
+      <>
+        <ToastForTest {...toastData} />
+        <p id="test-action">test-action</p>
+        <Toaster />
+      </>,
+      {},
+    );
+
+    const toastBtn = screen.getByText('ToastButton');
+    expect(toastBtn).toBeInTheDocument();
+
+    fireEvent.click(toastBtn);
+
+    // show title
+    const title = screen.getByText(toastData.title);
+    expect(title).toBeInTheDocument();
+
+    // show description
+    const description = screen.getByText(toastData.description);
+    expect(description).toBeInTheDocument();
+
+    // work action with data
+    const testaction = screen.getByText('test-action');
+    expect(testaction).toBeInTheDocument();
+    expect(testaction.className).not.toBe(toastData.data);
+
+    fireEvent.click(description);
+
+    await waitFor(() => {
+      // when click toast, it should be removed.
+      expect(title).not.toBeInTheDocument();
+
+      // work action with data
+      expect(testaction.className).toBe(toastData.data);
+    });
+  });
+});
diff --git a/src/components/Toggle/Toggle.test.tsx b/src/components/Toggle/Toggle.test.tsx
new file mode 100644
index 0000000..88fca08
--- /dev/null
+++ b/src/components/Toggle/Toggle.test.tsx
@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { expect, it } from 'vitest';
+
+import { Toggle } from '..';
+import { fireEvent, render, screen } from '../../libs/test';
+
+describe('Toggle', () => {
+  it('Should be changed style', async () => {
+    render(<Toggle>Toggle</Toggle>, {});
+    const toggleBtn = screen.getByText('Toggle');
+
+    const beforeBG = toggleBtn.className;
+    fireEvent.click(toggleBtn);
+    const afterBG = toggleBtn.className;
+
+    expect(beforeBG).not.toBe(afterBG);
+  });
+});
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
new file mode 100644
index 0000000..cdfa302
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -0,0 +1,56 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { expect, it } from 'vitest';
+
+import { Button, Tooltip } from '..';
+import { fireEvent, render, screen, waitFor } from '../../libs/test';
+
+describe('Tooltip', () => {
+  it('Show Tooltip message when hover component', async () => {
+    const message = 'Tooltip Message';
+    render(
+      <Tooltip message={message}>
+        <Button>Tooltip</Button>
+      </Tooltip>,
+      {},
+    );
+
+    fireEvent.mouseOver(screen.getByText('Tooltip'));
+
+    await waitFor(() => expect(screen.getByText(message)));
+  });
+
+  it('Should changed Tooltip direction', async () => {
+    const messageLeft = 'Left Tooltip Message';
+    const messageBottm = 'Bottom Tooltip Message';
+    render(
+      <div>
+        <Tooltip message={messageLeft} direction="left">
+          <Button>TooltipLeft</Button>
+        </Tooltip>
+        <Tooltip message={messageBottm} direction="bottom">
+          <Button>TooltipBottom</Button>
+        </Tooltip>
+      </div>,
+      {},
+    );
+
+    let tooltipLeftClassName: string = '';
+    let tooltipBottomClassName: string = '';
+    fireEvent.mouseOver(screen.getByText('TooltipLeft'));
+    await waitFor(() => {
+      const tooltip = screen.getByText(messageLeft);
+      expect(tooltip).toBeInTheDocument();
+      tooltipLeftClassName = tooltip.className;
+    });
+
+    fireEvent.mouseOver(screen.getByText('TooltipBottom'));
+    await waitFor(() => {
+      const tooltip = screen.getByText(messageBottm);
+      expect(tooltip).toBeInTheDocument();
+      tooltipBottomClassName = tooltip.className;
+    });
+
+    expect(tooltipLeftClassName).not.toBe(tooltipBottomClassName);
+  });
+});