diff --git a/src/components/FormBuilder/fields/FieldArray.tsx b/src/components/FormBuilder/fields/FieldArray.tsx
index 3818d44..433a9ca 100644
--- a/src/components/FormBuilder/fields/FieldArray.tsx
+++ b/src/components/FormBuilder/fields/FieldArray.tsx
@@ -167,6 +167,7 @@ export const FieldArray = withConditional<FieldArrayFieldProps>(
                                   // eslint-disable-next-line jsx-a11y/control-has-associated-label
                                   <button
                                     type="button"
+                                    data-testid="remove-button"
                                     onClick={() => handleRemove(Number(index))}
                                     className="mt-4"
                                   >
diff --git a/src/components/FormBuilder/fields/HiddenField.tsx b/src/components/FormBuilder/fields/HiddenField.tsx
index 8b65631..e4022a5 100644
--- a/src/components/FormBuilder/fields/HiddenField.tsx
+++ b/src/components/FormBuilder/fields/HiddenField.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { FormControl, FormField } from "#/components/ui/Form";
+import { FormControl, FormField, FormItem } from "#/components/ui/Form";
 
 import { withConditional } from "../fields";
 
@@ -9,9 +9,9 @@ export const HiddenField = withConditional(({ form, field }) => (
     name={field.name}
     defaultValue={field.value}
     render={({ field: formField }) => (
-      <FormControl>
+      <FormItem>
         <input type="hidden" {...formField} />
-      </FormControl>
+      </FormItem>
     )}
   />
 ));
diff --git a/src/components/RichTextEditor/index.tsx b/src/components/RichTextEditor/index.tsx
index 04590a3..b586851 100644
--- a/src/components/RichTextEditor/index.tsx
+++ b/src/components/RichTextEditor/index.tsx
@@ -56,6 +56,7 @@ export function RichTextEditor({ initialValue, onChange }) {
     <div>
       <Suspense fallback={<Trans>Loading</Trans>}>
         <JoditEditor
+          data-testid="rich-text-editor"
           value={initialValue}
           config={{
             // @ts-ignore
diff --git a/tests/components/FormBuilder/CheckboxField.test.tsx b/tests/components/FormBuilder/CheckboxField.test.tsx
new file mode 100644
index 0000000..1ad3845
--- /dev/null
+++ b/tests/components/FormBuilder/CheckboxField.test.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent, renderHook } from "@testing-library/react";
+import { FormProvider, useForm, UseFormReturn } from "react-hook-form";
+
+import { CheckboxField, CheckboxFieldProps } from "#/components";
+
+const TestForm = ({
+  field,
+  form,
+}: {
+  field: CheckboxFieldProps;
+  form: UseFormReturn<any>;
+}) => (
+  <FormProvider {...form}>
+    <CheckboxField form={form} field={field} />
+  </FormProvider>
+);
+
+describe("CheckboxField", () => {
+  it("renders a checkbox element", () => {
+    const field: CheckboxFieldProps = {
+      type: "checkbox",
+      name: "test",
+      value: "",
+      label: "Test Checkbox",
+    };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    const checkboxElement = screen.getByRole("checkbox");
+    expect(checkboxElement).toBeInTheDocument();
+  });
+
+  it("updates the form state correctly when interacted with", () => {
+    const field: CheckboxFieldProps = {
+      type: "checkbox",
+      name: "test",
+      value: "",
+      label: "Test Checkbox",
+    };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    const checkboxElement = screen.getByRole("checkbox");
+    fireEvent.click(checkboxElement);
+    expect(result.current.getValues("test")).toBe(true);
+  });
+});
diff --git a/tests/components/FormBuilder/DatePickerInput.test.tsx b/tests/components/FormBuilder/DatePickerInput.test.tsx
new file mode 100644
index 0000000..cefc7e7
--- /dev/null
+++ b/tests/components/FormBuilder/DatePickerInput.test.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { vi, describe, it, expect } from "vitest";
+import { render, screen, fireEvent, renderHook } from "@testing-library/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { DatePickerInput } from "#/components";
+
+const TestForm = ({ form, field }) => (
+  <FormProvider {...form}>
+    <DatePickerInput form={form} field={field} />
+  </FormProvider>
+);
+
+describe("DatePickerInput", () => {
+  it("renders a date picker input", () => {
+    const field = { type: "date", name: "test" };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    const datePickerElement = screen.getByText("Pick a date");
+    expect(datePickerElement).toBeInTheDocument();
+  });
+
+  it("updates the form state correctly when a date is selected", () => {
+    const mockDate = new Date(2022, 0, 1);
+    vi.setSystemTime(mockDate);
+
+    const field = { type: "date", name: "test" };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    const datePickerElement = screen.getByText("Pick a date");
+    fireEvent.click(datePickerElement);
+    const dateElement = screen.getByText("10");
+    fireEvent.click(dateElement);
+    expect(result.current.getValues("test")).toStrictEqual(
+      new Date(2022, 0, 10)
+    );
+  });
+});
diff --git a/tests/components/FormBuilder/FieldArray.test.tsx b/tests/components/FormBuilder/FieldArray.test.tsx
new file mode 100644
index 0000000..a266d86
--- /dev/null
+++ b/tests/components/FormBuilder/FieldArray.test.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent, renderHook } from "@testing-library/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { FieldArray } from "#/components";
+
+const TestForm = ({ form, field }) => (
+  <FormProvider {...form}>
+    <FieldArray form={form} field={field} />
+  </FormProvider>
+);
+
+describe("FieldArray", () => {
+  it("renders an 'Add' button", () => {
+    const field = {
+      type: "field_array",
+      name: "test",
+      defaultValues: {},
+      fields: [],
+      hasSequence: false,
+    };
+    const { result } = renderHook(() =>
+      useForm({ defaultValues: { [field.name]: [{ name: "John" }] } })
+    );
+
+    render(<TestForm field={field} form={result.current} />);
+    const addButton = screen.getByText("Add");
+    expect(addButton).toBeInTheDocument();
+  });
+
+  it("adds a new field when the 'Add' button is clicked", () => {
+    const field = {
+      type: "field_array",
+      name: "test",
+      label: "Test",
+      defaultValues: { name: "" },
+      fields: [{ type: "input", name: "name" }],
+      hasSequence: false,
+    };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    const addButton = screen.getByText(`Add ${field.label}`);
+    fireEvent.click(addButton);
+    expect(result.current.getValues(field.name)).toHaveLength(1);
+  });
+
+  it("removes a field when the remove button is clicked", () => {
+    const field = {
+      type: "field_array",
+      name: "test",
+      defaultValues: { name: "" },
+      fields: [{ type: "input", name: "name" }],
+      hasSequence: false,
+      remove: true,
+    };
+    const { result } = renderHook(() =>
+      useForm({ defaultValues: { [field.name]: [{ name: "John" }] } })
+    );
+    render(<TestForm field={field} form={result.current} />);
+    const removeButton = screen.getByTestId("remove-button");
+    fireEvent.click(removeButton);
+    expect(result.current.getValues(field.name)).toHaveLength(0);
+  });
+});
diff --git a/tests/components/FormBuilder/FileUploadField.test.tsx b/tests/components/FormBuilder/FileUploadField.test.tsx
new file mode 100644
index 0000000..6d2eca1
--- /dev/null
+++ b/tests/components/FormBuilder/FileUploadField.test.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent, renderHook } from "@testing-library/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { FileUploadField } from "#/components";
+
+const TestForm = ({ form, field }) => (
+  <FormProvider {...form}>
+    <FileUploadField form={form} field={field} />
+  </FormProvider>
+);
+
+describe("FileUploadField", () => {
+  it("renders an upload button", () => {
+    const field = { type: "file", name: "test", mode: "file" };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    const uploadButton = screen.getByText("Upload a file");
+    expect(uploadButton).toBeInTheDocument();
+  });
+
+  it("updates the form state when a file is uploaded", async () => {
+    const field = { type: "file", name: "test", mode: "file" };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    const file = new File(["test"], "test.txt", { type: "text/plain" });
+    const inputElement = screen.getByRole("button", { name: "Upload a file" });
+    Object.defineProperty(inputElement, "files", {
+      value: [file],
+    });
+    fireEvent.change(inputElement);
+
+    expect(result.current.getValues(field.name)).toBeInstanceOf(File);
+  });
+});
diff --git a/tests/components/FormBuilder/FormField.test.tsx b/tests/components/FormBuilder/FormField.test.tsx
new file mode 100644
index 0000000..dc16ecd
--- /dev/null
+++ b/tests/components/FormBuilder/FormField.test.tsx
@@ -0,0 +1,40 @@
+// FormField.test.tsx
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { render, renderHook, screen } from "@testing-library/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { FormField } from "#/components";
+
+describe("FormField", () => {
+  const renderFormField = (props) => {
+    const { result } = renderHook(() => useForm());
+    return (
+      <FormProvider {...result.current}>
+        <FormField {...props} />
+      </FormProvider>
+    );
+  };
+
+  it("renders the appropriate field component based on the render prop", () => {
+    render(
+      renderFormField({
+        name: "test",
+        render: ({ field }) => <input {...field} placeholder="Enter text" />,
+      })
+    );
+    const inputElement = screen.getByPlaceholderText("Enter text");
+    expect(inputElement).toBeInTheDocument();
+  });
+
+  it("passes the correct props to the render function", () => {
+    const renderMock = vi.fn();
+    render(renderFormField({ name: "test", render: renderMock }));
+    expect(renderMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        field: expect.any(Object),
+        fieldState: expect.any(Object),
+        formState: expect.any(Object),
+      })
+    );
+  });
+});
diff --git a/tests/components/FormBuilder/FormFieldProvider.test.tsx b/tests/components/FormBuilder/FormFieldProvider.test.tsx
new file mode 100644
index 0000000..f99592a
--- /dev/null
+++ b/tests/components/FormBuilder/FormFieldProvider.test.tsx
@@ -0,0 +1,41 @@
+// import * as React from "react";
+// import { describe, it, expect } from "vitest";
+// import { render, screen, renderHook } from "@testing-library/react";
+// import {
+//   FormFieldProvider,
+//   useFormFieldState,
+//   useFormFieldUpdater,
+// } from "#/components";
+
+// describe("FormFieldProvider", () => {
+//   it("correctly initializes the field state with the provided name", () => {
+//     render(
+//       <FormFieldProvider
+//         name="test"
+//         render={({ field }) => <div {...field} data-testid="child" />}
+//       />
+//     );
+//     const childElement = screen.getByTestId("child");
+//     expect(childElement).toBeInTheDocument();
+//   });
+
+//   it("provides the field state and updater function to its children", () => {
+//     const { result } = renderHook(
+//       () => {
+//         const fieldState = useFormFieldState();
+//         const setFieldState = useFormFieldUpdater();
+//         return { fieldState, setFieldState };
+//       },
+//       {
+//         wrapper: ({ children }) => (
+//           <FormFieldProvider
+//             name="test"
+//             render={({ field }) => <div>{children}</div>}
+//           />
+//         ),
+//       }
+//     );
+//     expect(result.current.fieldState.name).toBe("test");
+//     expect(typeof result.current.setFieldState).toBe("function");
+//   });
+// });
diff --git a/tests/components/FormBuilder/HiddenField.test.tsx b/tests/components/FormBuilder/HiddenField.test.tsx
new file mode 100644
index 0000000..0609c7c
--- /dev/null
+++ b/tests/components/FormBuilder/HiddenField.test.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, renderHook } from "@testing-library/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { HiddenField } from "#/components";
+
+const TestForm = ({ form, field }) => (
+  <FormProvider {...form}>
+    <HiddenField form={form} field={field} />
+  </FormProvider>
+);
+
+describe("HiddenField", () => {
+  it("renders a hidden input field", () => {
+    const field = { type: "hidden", name: "test", value: "hiddenValue" };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    const hiddenInput = result.current.getValues("test");
+    expect(hiddenInput).toBe("hiddenValue");
+  });
+});
diff --git a/tests/components/FormBuilder/InputField.test.tsx b/tests/components/FormBuilder/InputField.test.tsx
new file mode 100644
index 0000000..d7c6b8b
--- /dev/null
+++ b/tests/components/FormBuilder/InputField.test.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent, renderHook } from "@testing-library/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { InputField } from "#/components";
+
+const TestForm = ({ field }) => {
+  const form = useForm();
+  return (
+    <FormProvider {...form}>
+      <InputField form={form} field={field} />
+    </FormProvider>
+  );
+};
+
+describe("InputField", () => {
+  it("renders an input element", () => {
+    const field = { type: "input", name: "test" };
+    render(<TestForm field={field} />);
+    const inputElement = screen.getByRole("textbox");
+    expect(inputElement).toBeInTheDocument();
+  });
+
+  // it("applies the appropriate validation rules", () => {
+  //   const field = { type: "input", name: "test", required: true };
+  //   render(<TestForm field={field} />);
+  //   const inputElement = screen.getByRole("textbox");
+  //   fireEvent.change(inputElement, { target: { value: "" } });
+  //   expect(inputElement).toBeInvalid();
+  // });
+
+  it("updates the form state correctly when interacted with", () => {
+    const field = {
+      type: "input",
+      name: "test",
+      value: "",
+      mode: "text",
+    } as const;
+    const { result } = renderHook(() => useForm());
+    render(
+      <FormProvider {...result.current}>
+        <InputField form={result.current} field={field} />
+      </FormProvider>
+    );
+    const inputElement = screen.getByRole("textbox");
+    fireEvent.change(inputElement, { target: { value: "Test value" } });
+    expect(result.current.getValues("test")).toBe("Test value");
+  });
+});
diff --git a/tests/components/FormBuilder/MultiSelectCheckboxesField.test.tsx b/tests/components/FormBuilder/MultiSelectCheckboxesField.test.tsx
new file mode 100644
index 0000000..586b863
--- /dev/null
+++ b/tests/components/FormBuilder/MultiSelectCheckboxesField.test.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent, renderHook } from "@testing-library/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { MultiSelectCheckboxes } from "#/components";
+
+const TestForm = ({ form, field }) => (
+  <FormProvider {...form}>
+    <MultiSelectCheckboxes form={form} field={field} />
+  </FormProvider>
+);
+
+describe("MultiSelectCheckboxes", () => {
+  it("renders checkboxes for each option", () => {
+    const field = {
+      type: "multi_select_checkbox",
+      name: "test",
+      options: [
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2" },
+      ],
+    };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    const checkbox1 = screen.getByLabelText("Option 1");
+    const checkbox2 = screen.getByLabelText("Option 2");
+    expect(checkbox1).toBeInTheDocument();
+    expect(checkbox2).toBeInTheDocument();
+  });
+
+  it("updates the form state when checkboxes are checked/unchecked", () => {
+    const field = {
+      type: "multi_select_checkbox",
+      name: "test",
+      options: [
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2" },
+      ],
+    };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    const checkbox1 = screen.getByLabelText("Option 1");
+    const checkbox2 = screen.getByLabelText("Option 2");
+    fireEvent.click(checkbox1);
+    fireEvent.click(checkbox2);
+    expect(result.current.getValues(field.name)).toEqual([
+      "option1",
+      "option2",
+    ]);
+    fireEvent.click(checkbox1);
+    expect(result.current.getValues(field.name)).toEqual(["option2"]);
+  });
+});
diff --git a/tests/components/FormBuilder/RadioGroupField.test.tsx b/tests/components/FormBuilder/RadioGroupField.test.tsx
new file mode 100644
index 0000000..27b355f
--- /dev/null
+++ b/tests/components/FormBuilder/RadioGroupField.test.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent, renderHook } from "@testing-library/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { RadioGroupField } from "#/components";
+
+const TestForm = ({ form, field }) => (
+  <FormProvider {...form}>
+    <RadioGroupField form={form} field={field} />
+  </FormProvider>
+);
+
+describe("RadioGroupField", () => {
+  it("renders radio buttons for each option", () => {
+    const field = {
+      type: "radio_group",
+      name: "test",
+      options: [
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2" },
+      ],
+    };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    const radio1 = screen.getByLabelText("Option 1");
+    const radio2 = screen.getByLabelText("Option 2");
+    expect(radio1).toBeInTheDocument();
+    expect(radio2).toBeInTheDocument();
+  });
+
+  it("updates the form state when a radio button is selected", () => {
+    const field = {
+      type: "radio_group",
+      name: "test",
+      options: [
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2" },
+      ],
+    };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    const radio1 = screen.getByLabelText("Option 1");
+    const radio2 = screen.getByLabelText("Option 2");
+    fireEvent.click(radio1);
+    expect(result.current.getValues("test")).toBe("option1");
+    fireEvent.click(radio2);
+    expect(result.current.getValues("test")).toBe("option2");
+  });
+});
diff --git a/tests/components/FormBuilder/RichTextEditorField.test.tsx b/tests/components/FormBuilder/RichTextEditorField.test.tsx
new file mode 100644
index 0000000..2983f38
--- /dev/null
+++ b/tests/components/FormBuilder/RichTextEditorField.test.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen, renderHook, act } from "@testing-library/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { RichTextEditorField } from "#/components";
+
+const TestForm = ({ form, field }) => (
+  <FormProvider {...form}>
+    <RichTextEditorField form={form} field={field} />
+  </FormProvider>
+);
+
+describe("RichTextEditorField", () => {
+  it("renders a rich text editor", async () => {
+    const field = { type: "wysiwyg", name: "test" };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    expect(screen.getByText("Loading")).toBeInTheDocument();
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    expect(screen.getByTestId("rich-text-editor")).toBeInTheDocument();
+  });
+
+  it("updates the form state when the editor content changes", async () => {
+    const field = { type: "wysiwyg", name: "test" };
+    const { result } = renderHook(() => useForm());
+    const { container } = render(
+      <TestForm field={field} form={result.current} />
+    );
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    const editorElement = container.querySelector(".jodit-wysiwyg");
+
+    await act(async () => {
+      editorElement.innerHTML = "<p>Test content</p>";
+      editorElement.dispatchEvent(new Event("blur"));
+    });
+
+    expect(result.current.getValues("test")).toBe("<p>Test content</p>");
+  });
+});
diff --git a/tests/components/FormBuilder/SwitchField.test.tsx b/tests/components/FormBuilder/SwitchField.test.tsx
new file mode 100644
index 0000000..622465a
--- /dev/null
+++ b/tests/components/FormBuilder/SwitchField.test.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent, renderHook } from "@testing-library/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { SwitchField } from "#/components";
+
+const TestForm = ({ form, field }) => (
+  <FormProvider {...form}>
+    <SwitchField form={form} field={field} />
+  </FormProvider>
+);
+
+describe("SwitchField", () => {
+  it("renders a switch element", () => {
+    const field = { type: "switch", name: "test" };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    const switchElement = screen.getByRole("switch");
+    expect(switchElement).toBeInTheDocument();
+  });
+
+  it("updates the form state when the switch is toggled", () => {
+    const field = { type: "switch", name: "test" };
+    const { result } = renderHook(() => useForm());
+    render(<TestForm field={field} form={result.current} />);
+    const switchElement = screen.getByRole("switch");
+    fireEvent.click(switchElement);
+    expect(result.current.getValues("test")).toBe(true);
+  });
+});
diff --git a/tests/components/FormBuilder/TextAreaField.test.tsx b/tests/components/FormBuilder/TextAreaField.test.tsx
new file mode 100644
index 0000000..8aef818
--- /dev/null
+++ b/tests/components/FormBuilder/TextAreaField.test.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent, renderHook } from "@testing-library/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { TextAreaField } from "#/components";
+
+const TestForm = ({ field }) => {
+  const form = useForm();
+  return (
+    <FormProvider {...form}>
+      <TextAreaField form={form} field={field} />
+    </FormProvider>
+  );
+};
+
+describe("TextAreaField", () => {
+  it("renders a textarea element", () => {
+    const field = { type: "textarea", name: "test" };
+    render(<TestForm field={field} />);
+    const textareaElement = screen.getByRole("textbox");
+    expect(textareaElement).toBeInTheDocument();
+  });
+
+  // it("applies the appropriate validation rules", () => {
+  //   const field = { type: "textarea", name: "test", required: true };
+  //   render(<TestForm field={field} />);
+  //   const textareaElement = screen.getByRole("textbox");
+  //   fireEvent.change(textareaElement, { target: { value: "" } });
+  //   expect(textareaElement).toBeInvalid();
+  // });
+
+  it("updates the form state correctly when interacted with", () => {
+    const field = { type: "textarea", name: "test", value: "" } as const;
+    const { result } = renderHook(() => useForm());
+    render(
+      <FormProvider {...result.current}>
+        <TextAreaField form={result.current} field={field} />
+      </FormProvider>
+    );
+    const textareaElement = screen.getByRole("textbox");
+    fireEvent.change(textareaElement, { target: { value: "Test value" } });
+    expect(result.current.getValues("test")).toBe("Test value");
+  });
+});
diff --git a/tests/components/FormBuilder/buildForm.test.ts b/tests/components/FormBuilder/buildForm.test.ts
new file mode 100644
index 0000000..727a7cb
--- /dev/null
+++ b/tests/components/FormBuilder/buildForm.test.ts
@@ -0,0 +1,36 @@
+// buildForm.test.tsx
+import { describe, it, expect } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { useForm } from "react-hook-form";
+import { buildForm } from "#/components/FormBuilder/buildForm";
+import { InputField } from "#/components/FormBuilder/fields/InputField";
+
+describe("buildForm", () => {
+  const fields = [
+    { type: "input", name: "firstName", value: "", mode: "text" },
+    { type: "textarea", name: "description", value: "" },
+  ];
+  const { result: renderHookResult } = renderHook(() => useForm());
+  const form = renderHookResult.current;
+
+  it("returns an array of form elements", () => {
+    const result = buildForm(fields, form);
+    expect(Array.isArray(result)).toBe(true);
+  });
+
+  it("throws an error when an invalid field type is provided", () => {
+    const invalidFields = [{ type: "invalid", name: "test", value: "" }];
+    expect(() => buildForm(invalidFields, form)).toThrowError(
+      "Invalid field type: invalid"
+    );
+  });
+
+  it("uses custom components when provided", () => {
+    const customFields = [{ type: "joana", name: "description", value: "" }];
+    const customComponents = {
+      joana: InputField,
+    } as unknown as Parameters<typeof buildForm>[3];
+    const result = buildForm(customFields, form, 0, customComponents);
+    expect(result[0].type).toBe(InputField);
+  });
+});
diff --git a/tests/components/FormBuilder/useFormField.test.tsx b/tests/components/FormBuilder/useFormField.test.tsx
new file mode 100644
index 0000000..5e52cd6
--- /dev/null
+++ b/tests/components/FormBuilder/useFormField.test.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { FormProvider, useForm } from "react-hook-form";
+import {
+  FormFieldProvider,
+  FormItemProvider,
+  useFormField,
+} from "#/components";
+
+describe("useFormField", () => {
+  const wrapper = ({ children }) => {
+    const methods = useForm();
+    return (
+      <FormProvider {...methods}>
+        <FormFieldProvider name="test" render={() => <div />}>
+          <FormItemProvider>{children}</FormItemProvider>
+        </FormFieldProvider>
+      </FormProvider>
+    );
+  };
+  it("returns the correct field state and item state", () => {
+    const { result } = renderHook(() => useFormField(), { wrapper });
+    expect(result.current.name).toBe("test");
+    expect(result.current.id).toBeTruthy();
+  });
+
+  it("returns the field state from the form context", () => {
+    const { result } = renderHook(() => useFormField(), { wrapper });
+    expect(result.current.name).toBe("test");
+    expect(result.current.isTouched).toBe(false);
+  });
+
+  it("throws an error when used outside of FormField", () => {
+    expect(() => renderHook(() => useFormField())).toThrowError(
+      /useFormFieldState must be used within a FormFieldProvider/
+    );
+  });
+});
diff --git a/tests/components/FormBuilder/withConditional.test.tsx b/tests/components/FormBuilder/withConditional.test.tsx
new file mode 100644
index 0000000..ceddac4
--- /dev/null
+++ b/tests/components/FormBuilder/withConditional.test.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+import { describe, it, expect } from "vitest";
+import { render, renderHook, screen } from "@testing-library/react";
+import { useForm } from "react-hook-form";
+import { withConditional } from "#/components";
+
+describe("withConditional", () => {
+  const TestComponent = () => <div>Test</div>;
+  const ConditionalComponent = withConditional(TestComponent);
+
+  it("renders the wrapped component when conditions are satisfied", () => {
+    const field = {
+      name: "test",
+      type: "input",
+      value: "",
+      conditions: [{ name: "test", value: "value" }],
+    };
+    const form = renderHook(() =>
+      useForm({
+        defaultValues: { test: "value" },
+      })
+    ).result.current;
+    // @ts-expect-error TS(2345) FIXME: Argument of type 'React.ComponentType<CommonFieldProps<BaseField>>' is not assignable to parameter of type 'React.ComponentType<CommonFieldProps<BaseField>>'.
+    render(<ConditionalComponent field={field} form={form} />);
+    const testElement = screen.getByText("Test");
+    expect(testElement).toBeInTheDocument();
+  });
+
+  it("does not render the wrapped component when conditions are not satisfied", () => {
+    const field = {
+      name: "test",
+      type: "input",
+      value: "",
+      conditions: [{ name: "test", value: "value" }],
+    };
+    const form = renderHook(() => useForm()).result.current;
+    render(<ConditionalComponent field={field} form={form} />);
+    const testElement = screen.queryByText("Test");
+    expect(testElement).not.toBeInTheDocument();
+  });
+});
diff --git a/tests/components/ui/Form.test.tsx b/tests/components/ui/Form.test.tsx
new file mode 100644
index 0000000..f466028
--- /dev/null
+++ b/tests/components/ui/Form.test.tsx
@@ -0,0 +1,86 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "#/components/ui/Form";
+
+vi.mock("#/components//RailsApp/context", async () => {
+  const mod = await vi.importActual("#/components/RailsApp/context");
+  return {
+    ...mod,
+    useRailsApp: () => ({
+      csrfToken: "mocked-csrf-token",
+    }),
+  };
+});
+
+vi.mock("#/components/ui/Tooltip", () => ({
+  Tooltip: ({ children }) => <div>{children}</div>,
+}));
+
+const TestForm = () => {
+  const form = useForm();
+
+  return (
+    <Form {...form}>
+      <FormField
+        name="testField"
+        rules={{ required: "Field is required" }}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Test Field</FormLabel>
+            <FormControl>
+              <input type="text" {...field} />
+            </FormControl>
+            <FormDescription>This is a test field</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <button type="submit">Submit</button>
+    </Form>
+  );
+};
+
+describe("Form Components", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders the form correctly", () => {
+    render(<TestForm />);
+    expect(screen.getByText("Test Field")).toBeInTheDocument();
+    expect(screen.getByText("This is a test field")).toBeInTheDocument();
+    expect(screen.getByText("Submit")).toBeInTheDocument();
+  });
+
+  // it("displays error message when field is invalid", async () => {
+  //   render(<TestForm />);
+  //   fireEvent.submit(screen.getByText("Submit"));
+  //   expect(await screen.findByRole("alert")).toHaveTextContent(
+  //     "Field is required"
+  //   );
+  // });
+
+  it("passes validation when field is valid", async () => {
+    render(<TestForm />);
+    fireEvent.change(screen.getByRole("textbox"), {
+      target: { value: "Valid input" },
+    });
+    fireEvent.submit(screen.getByText("Submit"));
+    expect(screen.queryByText("Field is required")).not.toBeInTheDocument();
+  });
+
+  it("renders the CSRF token input", () => {
+    render(<TestForm />);
+    expect(screen.getByTestId("csrf-token")).toHaveValue("mocked-csrf-token");
+  });
+});
diff --git a/tests/setup.js b/tests/setup.ts
similarity index 60%
rename from tests/setup.js
rename to tests/setup.ts
index 971941d..d875b58 100644
--- a/tests/setup.js
+++ b/tests/setup.ts
@@ -2,6 +2,12 @@ import { expect, afterEach } from "vitest";
 import { cleanup } from "@testing-library/react";
 import * as matchers from "@testing-library/jest-dom/matchers";
 
+declare module "vitest" {
+  interface Assertion<T = any>
+    extends jest.Matchers<void, T>,
+      matchers.TestingLibraryMatchers<T, void> {}
+}
+
 expect.extend(matchers);
 
 afterEach(() => {
diff --git a/tsconfig.json b/tsconfig.json
index b7204cc..2bb2744 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,8 @@
     "skipLibCheck": true,
     "strict": true,
     "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["vitest/globals"],
+
     "plugins": [
       { "transform": "typescript-transform-paths" },
       { "transform": "typescript-transform-paths", "afterDeclarations": true }
diff --git a/vitest.config.mts b/vitest.config.mts
index 270ff1f..3c251c9 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -2,14 +2,21 @@ import { defineConfig as viteDefineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 
 import { defineConfig, mergeConfig } from "vitest/config";
+import path from "path";
 
 export default mergeConfig(
   viteDefineConfig({ plugins: [react()] }),
   defineConfig({
     test: {
+      globals: true,
       environment: "jsdom",
-      setupFiles: "./tests/setup.js",
+      setupFiles: "./tests/setup.ts",
       passWithNoTests: true,
     },
+    resolve: {
+      alias: {
+        "#": path.resolve(__dirname, "./src"),
+      },
+    },
   })
 );