diff --git a/src/components/FormBuilder/fields/CheckboxField.tsx b/src/components/FormBuilder/fields/CheckboxField.tsx
index f7eb022..d1ad1d0 100644
--- a/src/components/FormBuilder/fields/CheckboxField.tsx
+++ b/src/components/FormBuilder/fields/CheckboxField.tsx
@@ -9,6 +9,7 @@ import {
 } from "#/components/ui/Form";
 
 import { BaseField, withConditional } from "../fields";
+import isFieldDisabled from "../isFieldDisabled";
 
 export interface CheckboxFieldProps extends BaseField {
   type: "checkbox";
@@ -31,6 +32,7 @@ export const CheckboxField = withConditional<CheckboxFieldProps>(
             <Checkbox
               checked={formField.value}
               onCheckedChange={formField.onChange}
+              disabled={isFieldDisabled(form, field)}
             />
           </FormControl>
           <div className="space-y-1 leading-none">
diff --git a/src/components/FormBuilder/fields/DatePickerInput.tsx b/src/components/FormBuilder/fields/DatePickerInput.tsx
index 38caa3c..c688e9d 100644
--- a/src/components/FormBuilder/fields/DatePickerInput.tsx
+++ b/src/components/FormBuilder/fields/DatePickerInput.tsx
@@ -34,6 +34,7 @@ export const DatePickerInput = withConditional<DatePickerInputProps>(
         control={form.control}
         name={field.name}
         rules={field.required ? { required: true } : undefined}
+        defaultValue={field.defaultValue}
         render={({ field: formField }) => (
           <FormItem className="flex flex-col">
             <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>
diff --git a/src/components/FormBuilder/fields/FieldArray.tsx b/src/components/FormBuilder/fields/FieldArray.tsx
index 3818d44..8350fdb 100644
--- a/src/components/FormBuilder/fields/FieldArray.tsx
+++ b/src/components/FormBuilder/fields/FieldArray.tsx
@@ -125,8 +125,7 @@ export const FieldArray = withConditional<FieldArrayFieldProps>(
           <DragDropContext onDragEnd={handleDrag}>
             <ul>
               <StrictModeDroppable droppableId={`${field.name}-items`}>
-                {/* eslint-disable-next-line no-shadow, @typescript-eslint/no-unused-vars */}
-                {(provided, snapshot) => (
+                {(provided) => (
                   <div {...provided.droppableProps} ref={provided.innerRef}>
                     {fields.map((rhfField, index) => {
                       // @ts-expect-error
@@ -139,11 +138,10 @@ export const FieldArray = withConditional<FieldArrayFieldProps>(
                           draggableId={`item-${index}`}
                           index={index}
                         >
-                          {/* eslint-disable-next-line no-shadow, @typescript-eslint/no-unused-vars */}
-                          {(provided, snapshot) => (
+                          {(innerProvided) => (
                             <li
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
+                              ref={innerProvided.innerRef}
+                              {...innerProvided.draggableProps}
                               className="mb-3"
                             >
                               <div
@@ -152,7 +150,7 @@ export const FieldArray = withConditional<FieldArrayFieldProps>(
                                 {field.hasSequence && (
                                   <div
                                     className="flex h-full w-6 flex-col justify-center"
-                                    {...provided.dragHandleProps}
+                                    {...innerProvided.dragHandleProps}
                                   >
                                     <MoveIcon className="size-6 self-center" />
                                   </div>
@@ -167,6 +165,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..54b79c5 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 { 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/FormBuilder/fields/InputField.tsx b/src/components/FormBuilder/fields/InputField.tsx
index 4add6ac..76dfb41 100644
--- a/src/components/FormBuilder/fields/InputField.tsx
+++ b/src/components/FormBuilder/fields/InputField.tsx
@@ -53,6 +53,7 @@ export const InputField = withConditional<InputFieldProps>(
               }
             : undefined
         }
+        defaultValue={field.defaultValue}
         render={({ field: formField }) => (
           <FormItem className="w-full">
             <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>
diff --git a/src/components/FormBuilder/fields/MultiSelectCheckboxesField.tsx b/src/components/FormBuilder/fields/MultiSelectCheckboxesField.tsx
index 6b285ce..9db0de4 100644
--- a/src/components/FormBuilder/fields/MultiSelectCheckboxesField.tsx
+++ b/src/components/FormBuilder/fields/MultiSelectCheckboxesField.tsx
@@ -12,12 +12,12 @@ import {
 import { withConditional } from "../fields";
 import { SelectFieldProps } from "./selects/SelectField";
 
-export interface MultiSelectCheckboxesField extends SelectFieldProps {
+export interface MultiSelectCheckboxesFieldProps extends SelectFieldProps {
   type: "multi_select_checkbox";
 }
 
 export const MultiSelectCheckboxes =
-  withConditional<MultiSelectCheckboxesField>(({ form, field }) => (
+  withConditional<MultiSelectCheckboxesFieldProps>(({ form, field }) => (
     <FormField
       control={form.control}
       name={field.name}
diff --git a/src/components/FormBuilder/fields/TextAreaField.tsx b/src/components/FormBuilder/fields/TextAreaField.tsx
index 3ed0b6b..532ee02 100644
--- a/src/components/FormBuilder/fields/TextAreaField.tsx
+++ b/src/components/FormBuilder/fields/TextAreaField.tsx
@@ -11,6 +11,7 @@ import {
 import { Textarea } from "#/components/ui/Textarea";
 
 import { BaseField, withConditional } from "../fields";
+import isFieldDisabled from "../isFieldDisabled";
 
 export interface TextAreaFieldProps extends BaseField {
   length?: {
@@ -47,6 +48,7 @@ export const TextAreaField = withConditional<TextAreaFieldProps>(
             <FormDescription>{field.description}</FormDescription>
             <FormControl>
               <Textarea
+                disabled={isFieldDisabled(form, field)}
                 placeholder={field.placeholder}
                 className="resize-none"
                 {...formField}
diff --git a/src/components/FormBuilder/fields/selects/SelectField.tsx b/src/components/FormBuilder/fields/selects/SelectField.tsx
index fae49c1..f143d2c 100644
--- a/src/components/FormBuilder/fields/selects/SelectField.tsx
+++ b/src/components/FormBuilder/fields/selects/SelectField.tsx
@@ -10,6 +10,7 @@ import {
 import * as Select from "#/components/ui/Select";
 
 import { BaseField, withConditional } from "../../fields";
+import isFieldDisabled from "../../isFieldDisabled";
 
 export interface SelectFieldProps extends BaseField {
   options?: Array<{
@@ -20,48 +21,41 @@ export interface SelectFieldProps extends BaseField {
 }
 
 export const SelectField = withConditional<SelectFieldProps>(
-  ({ form, field }) => {
-    const disabled =
-      typeof field.disabled === "function"
-        ? field.disabled(form.getValues())
-        : field.disabled;
+  ({ form, field }) => (
+    <FormField
+      control={form.control}
+      name={field.name}
+      rules={field.required ? { required: true } : undefined}
+      render={({ field: formField }) => (
+        <FormItem className="w-full">
+          <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>
+          <FormDescription>{field.description}</FormDescription>
+          <Select.SelectRoot
+            onValueChange={formField.onChange}
+            defaultValue={String(formField.value)}
+            name={field.name}
+            disabled={isFieldDisabled(form, field)}
+          >
+            <FormControl>
+              <Select.SelectTrigger className="h-10 w-full rounded-md border dark:border-2 shadow-none">
+                <Select.SelectValue placeholder={field.placeholder} />
+              </Select.SelectTrigger>
+            </FormControl>
+            <Select.SelectContent className="z-[10000]">
+              {field.options?.map((option) => (
+                <Select.SelectItem
+                  key={String(option.value)}
+                  value={String(option.value)}
+                >
+                  {option.label}
+                </Select.SelectItem>
+              ))}
+            </Select.SelectContent>
+          </Select.SelectRoot>
 
-    return (
-      <FormField
-        control={form.control}
-        name={field.name}
-        rules={field.required ? { required: true } : undefined}
-        render={({ field: formField }) => (
-          <FormItem className="w-full">
-            <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>
-            <FormDescription>{field.description}</FormDescription>
-            <Select.SelectRoot
-              onValueChange={formField.onChange}
-              defaultValue={String(formField.value)}
-              name={field.name}
-              disabled={disabled}
-            >
-              <FormControl>
-                <Select.SelectTrigger className="h-10 w-full rounded-md border dark:border-2 shadow-none">
-                  <Select.SelectValue placeholder={field.placeholder} />
-                </Select.SelectTrigger>
-              </FormControl>
-              <Select.SelectContent className="z-[10000]">
-                {field.options?.map((option) => (
-                  <Select.SelectItem
-                    key={String(option.value)}
-                    value={String(option.value)}
-                  >
-                    {option.label}
-                  </Select.SelectItem>
-                ))}
-              </Select.SelectContent>
-            </Select.SelectRoot>
-
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    );
-  }
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  )
 );
diff --git a/src/components/FormBuilder/isFieldDisabled.ts b/src/components/FormBuilder/isFieldDisabled.ts
new file mode 100644
index 0000000..a09d762
--- /dev/null
+++ b/src/components/FormBuilder/isFieldDisabled.ts
@@ -0,0 +1,12 @@
+import { CommonFieldProps, FormFieldProps } from "./fields";
+
+type FieldProps = CommonFieldProps<FormFieldProps>;
+
+export default function isFieldDisabled(
+  form: FieldProps["form"],
+  field: FieldProps["field"]
+) {
+  return typeof field.disabled === "function"
+    ? field.disabled(form.getValues())
+    : field.disabled;
+}
diff --git a/src/components/RichTextEditor/index.tsx b/src/components/RichTextEditor/index.tsx
index 5a26c3f..04590a3 100644
--- a/src/components/RichTextEditor/index.tsx
+++ b/src/components/RichTextEditor/index.tsx
@@ -4,7 +4,10 @@ import React, { Suspense, lazy } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useTheme } from "#/components/ThemeToggle/context";
 
-const JoditEditor = lazy(() => import("jodit-react"));
+const JoditEditor = lazy(async () => {
+  const module = await import("jodit-react");
+  return { default: module.default };
+});
 
 const EDITOR_BUTTONS = [
   "undo",
diff --git a/src/components/ui/Form.tsx b/src/components/ui/Form.tsx
index 2cbd7ee..7b3e539 100644
--- a/src/components/ui/Form.tsx
+++ b/src/components/ui/Form.tsx
@@ -12,8 +12,16 @@ import {
 import { InfoCircledIcon } from "@radix-ui/react-icons";
 import { cn } from "#/lib/utils";
 import { Label } from "#/components/ui/Label";
-import { useRailsApp } from "../RailsApp/context";
-import { Tooltip } from ".";
+import { Tooltip } from "#/components/ui";
+import { useRailsApp } from "#/components/RailsApp";
+
+// Create separate contexts for form field state and updater
+const FormFieldStateContext = React.createContext<
+  FormFieldContextValue | undefined
+>(undefined);
+const FormFieldUpdaterContext = React.createContext<
+  React.Dispatch<React.SetStateAction<FormFieldContextValue>> | undefined
+>(undefined);
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
@@ -52,15 +60,38 @@ const Form = ({
       >
         {children}
         {csrfToken && (
-          <input type="hidden" name="authenticity_token" value={csrfToken} />
+          <input
+            type="hidden"
+            name="authenticity_token"
+            value={csrfToken}
+            data-testid="csrf-token"
+          />
         )}
       </form>
     </FormProvider>
   );
 };
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-);
+
+// Create a provider component for form field context
+export const FormFieldProvider = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  children,
+  ...props
+}: React.PropsWithChildren<ControllerProps<TFieldValues, TName>>) => {
+  const [fieldState, setFieldState] = React.useState<FormFieldContextValue>({
+    name: props.name,
+  });
+
+  return (
+    <FormFieldStateContext.Provider value={fieldState}>
+      <FormFieldUpdaterContext.Provider value={setFieldState}>
+        {children}
+      </FormFieldUpdaterContext.Provider>
+    </FormFieldStateContext.Provider>
+  );
+};
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
@@ -68,54 +99,114 @@ const FormField = <
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => (
-  // eslint-disable-next-line react/jsx-no-constructed-context-values
-  <FormFieldContext.Provider value={{ name: props.name }}>
+  <FormFieldProvider {...props}>
     <Controller {...props} />
-  </FormFieldContext.Provider>
+  </FormFieldProvider>
 );
 
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
+// Use hooks to access form field state and updater
+export const useFormFieldState = () => {
+  const fieldState = React.useContext(FormFieldStateContext);
+  if (typeof fieldState === "undefined") {
+    throw new Error(
+      "useFormFieldState must be used within a FormFieldProvider"
+    );
   }
+  return fieldState;
+};
 
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
+export const useFormFieldUpdater = () => {
+  const setFieldState = React.useContext(FormFieldUpdaterContext);
+  if (typeof setFieldState === "undefined") {
+    throw new Error(
+      "useFormFieldUpdater must be used within a FormFieldProvider"
+    );
+  }
+  return setFieldState;
 };
 
+// Create separate contexts for form item state and updater
+const FormItemStateContext = React.createContext<
+  FormItemContextValue | undefined
+>(undefined);
+const FormItemUpdaterContext = React.createContext<
+  React.Dispatch<React.SetStateAction<FormItemContextValue>> | undefined
+>(undefined);
+
 type FormItemContextValue = {
   id: string;
 };
 
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-);
+// Create a provider component for form item context
+export const FormItemProvider = ({
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const [itemState, setItemState] = React.useState<FormItemContextValue>({
+    id: React.useId(),
+  });
+
+  return (
+    <FormItemStateContext.Provider value={itemState}>
+      <FormItemUpdaterContext.Provider value={setItemState}>
+        <div {...props}>{children}</div>
+      </FormItemUpdaterContext.Provider>
+    </FormItemStateContext.Provider>
+  );
+};
 
 const FormItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  // eslint-disable-next-line react/jsx-no-constructed-context-values
-  <FormItemContext.Provider value={{ id: React.useId() }}>
+  <FormItemProvider>
     <div ref={ref} className={cn("space-y-2", className)} {...props} />
-  </FormItemContext.Provider>
+  </FormItemProvider>
 ));
 FormItem.displayName = "FormItem";
 
+// Use hooks to access form item state and updater
+const useFormItemState = () => {
+  const itemState = React.useContext(FormItemStateContext);
+  if (typeof itemState === "undefined") {
+    throw new Error("useFormItemState must be used within a FormItemProvider");
+  }
+  return itemState;
+};
+
+// const useFormItemUpdater = () => {
+//   const setItemState = React.useContext(FormItemUpdaterContext);
+//   if (typeof setItemState === "undefined") {
+//     throw new Error(
+//       "useFormItemUpdater must be used within a FormItemProvider"
+//     );
+//   }
+//   return setItemState;
+// };
+
+const useFormField = () => {
+  const fieldState = useFormFieldState();
+  const itemState = useFormItemState();
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldStateFromForm = getFieldState(fieldState.name, formState);
+
+  if (!fieldState) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemState;
+
+  return {
+    id,
+    name: fieldState.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldStateFromForm,
+  };
+};
+
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
diff --git a/tests/components/FormBuilder/CheckboxField.test.tsx b/tests/components/FormBuilder/CheckboxField.test.tsx
new file mode 100644
index 0000000..66cf8c0
--- /dev/null
+++ b/tests/components/FormBuilder/CheckboxField.test.tsx
@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import { screen, fireEvent } from "@testing-library/react";
+
+import { renderFormField } from "tests/helpers/renderFormField";
+import { CheckboxField, CheckboxFieldProps } from "#/components";
+
+describe("CheckboxField", () => {
+  const field: CheckboxFieldProps = {
+    type: "checkbox",
+    name: "test",
+    value: "",
+    label: "Test Checkbox",
+  };
+  it("renders a checkbox element", () => {
+    renderFormField(CheckboxField, field);
+
+    const checkboxElement = screen.getByRole("checkbox");
+    expect(checkboxElement).toBeInTheDocument();
+  });
+
+  it("renders the checkbox label correctly", () => {
+    renderFormField(CheckboxField, field);
+    const labelElement = screen.getByText("Test Checkbox");
+    expect(labelElement).toBeInTheDocument();
+  });
+
+  it("disables the checkbox when the disabled prop is set to true", () => {
+    renderFormField(CheckboxField, { ...field, disabled: true });
+    const checkboxElement = screen.getByRole("checkbox");
+    expect(checkboxElement).toBeDisabled();
+  });
+
+  it("updates the form state correctly when interacted with", () => {
+    const { form } = renderFormField(CheckboxField, field);
+
+    const checkboxElement = screen.getByRole("checkbox");
+    fireEvent.click(checkboxElement);
+    expect(form.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..620c580
--- /dev/null
+++ b/tests/components/FormBuilder/DatePickerInput.test.tsx
@@ -0,0 +1,43 @@
+import { vi, describe, it, expect } from "vitest";
+import { screen, fireEvent } from "@testing-library/react";
+import { renderFormField } from "tests/helpers/renderFormField";
+import { DatePickerInput, DatePickerInputProps } from "#/components";
+
+describe("DatePickerInput", () => {
+  const mockDate = new Date(2022, 0, 1);
+  const field: DatePickerInputProps = {
+    type: "date",
+    name: "test",
+    defaultValue: "",
+    value: "",
+  };
+
+  it("renders a date picker input", () => {
+    renderFormField(DatePickerInput, field);
+
+    const datePickerElement = screen.getByText("Pick a date");
+    expect(datePickerElement).toBeInTheDocument();
+  });
+
+  it("displays the selected date in the correct format", () => {
+    vi.setSystemTime(mockDate);
+    renderFormField(DatePickerInput, {
+      ...field,
+      defaultValue: mockDate.toDateString(),
+    });
+    const buttonElement = screen.getByRole("button");
+    expect(buttonElement).toHaveTextContent("Jan 1, 2022");
+  });
+
+  it("updates the form state correctly when a date is selected", () => {
+    vi.setSystemTime(mockDate);
+    const { form } = renderFormField(DatePickerInput, field);
+
+    const datePickerElement = screen.getByText("Pick a date");
+    fireEvent.click(datePickerElement);
+    const dateElement = screen.getByText("10");
+    fireEvent.click(dateElement);
+
+    expect(form.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..290d466
--- /dev/null
+++ b/tests/components/FormBuilder/FieldArray.test.tsx
@@ -0,0 +1,63 @@
+import { describe, it, expect } from "vitest";
+import { screen, fireEvent } from "@testing-library/react";
+import { renderFormField } from "tests/helpers/renderFormField";
+import { FieldArray, FieldArrayFieldProps } from "#/components";
+
+describe("FieldArray", () => {
+  it("renders an 'Add' button", () => {
+    const field: FieldArrayFieldProps = {
+      type: "field_array",
+      name: "test",
+      value: "",
+      defaultValues: { name: "" },
+      fields: [],
+      hasSequence: false,
+    };
+
+    renderFormField(FieldArray, field);
+    const addButton = screen.getByText("Add");
+    expect(addButton).toBeInTheDocument();
+  });
+
+  it("adds a new field when the 'Add' button is clicked", () => {
+    const field: FieldArrayFieldProps = {
+      type: "field_array",
+      name: "test",
+      value: "",
+      label: "Test",
+      defaultValues: { name: "" },
+      fields: [
+        {
+          type: "input",
+          name: "name",
+          label: "Name",
+          value: "",
+        },
+      ],
+      hasSequence: false,
+    };
+    const { form } = renderFormField(FieldArray, field);
+
+    const addButton = screen.getByText(`Add ${field.label}`);
+    fireEvent.click(addButton);
+    expect(form.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..1cf7f44
--- /dev/null
+++ b/tests/components/FormBuilder/FileUploadField.test.tsx
@@ -0,0 +1,34 @@
+import { describe, it, expect } from "vitest";
+import { screen } from "@testing-library/react";
+import { renderFormField } from "tests/helpers/renderFormField";
+import { FileUploadField, FileUploadFieldProps } from "#/components";
+
+describe("FileUploadField", () => {
+  it("renders an upload button", () => {
+    const field: FileUploadFieldProps = {
+      type: "file",
+      name: "test",
+      mode: "file",
+      value: "",
+    };
+
+    renderFormField(FileUploadField, field);
+
+    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..47b0e24
--- /dev/null
+++ b/tests/components/FormBuilder/FormField.test.tsx
@@ -0,0 +1,54 @@
+// 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 correct error message when validation fails", async () => {
+  //   render(
+  //     renderFormField({
+  //       name: "test",
+  //       rules: { required: "Field is required" },
+  //       render: ({ field }) => <input {...field} />,
+  //     })
+  //   );
+  //   const inputElement = screen.getByRole("textbox");
+  //   fireEvent.blur(inputElement);
+  //   const errorMessage = await screen.findByRole("alert");
+  //   expect(errorMessage).toHaveTextContent("Field is required");
+  // });
+
+  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..380b804
--- /dev/null
+++ b/tests/components/FormBuilder/HiddenField.test.tsx
@@ -0,0 +1,23 @@
+import { describe, it, expect } from "vitest";
+import { screen } from "@testing-library/react";
+import { BaseField, HiddenField } from "#/components";
+import { renderFormField } from "../../../tests/helpers/renderFormField";
+
+describe("HiddenField", () => {
+  const field: BaseField = {
+    type: "hidden",
+    name: "test",
+    value: "hiddenValue",
+  };
+  it("renders a hidden input field", () => {
+    const { form } = renderFormField(HiddenField, field);
+    const hiddenInput = form.getValues("test");
+    expect(hiddenInput).toBe("hiddenValue");
+  });
+
+  it("does not render any visible elements", () => {
+    renderFormField(HiddenField, field);
+    const hiddenInput = screen.queryByRole("textbox");
+    expect(hiddenInput).not.toBeInTheDocument();
+  });
+});
diff --git a/tests/components/FormBuilder/InputField.test.tsx b/tests/components/FormBuilder/InputField.test.tsx
new file mode 100644
index 0000000..0d6142f
--- /dev/null
+++ b/tests/components/FormBuilder/InputField.test.tsx
@@ -0,0 +1,50 @@
+import { describe, it, expect } from "vitest";
+import { screen, fireEvent } from "@testing-library/react";
+import { renderFormField } from "tests/helpers/renderFormField";
+import { InputField, InputFieldProps } from "#/components";
+
+describe("InputField", () => {
+  const field: InputFieldProps = {
+    type: "input",
+    name: "test",
+    value: "",
+    mode: "text",
+  };
+  it("renders an input element", () => {
+    renderFormField(InputField, field);
+    const inputElement = screen.getByRole("textbox");
+    expect(inputElement).toBeInTheDocument();
+  });
+
+  it("applies the disabled prop when set to true", () => {
+    renderFormField(InputField, { ...field, disabled: true });
+    const inputElement = screen.getByRole("textbox");
+    expect(inputElement).toBeDisabled();
+  });
+
+  // it("shows an error message when the input value is invalid", async () => {
+  //   renderFormField(InputField, {
+  //     ...field,
+  //     required: true,
+  //     length: { minimum: 5 },
+  //   });
+  //   const inputElement = screen.getByRole("textbox");
+  //   fireEvent.change(inputElement, { target: { value: "test" } });
+  //   fireEvent.blur(inputElement);
+  //   const errorMessage = await screen.findByRole("alert");
+  //   expect(errorMessage).toBeInTheDocument();
+  // });
+
+  it("updates the form state correctly when interacted with", () => {
+    const { form } = renderFormField(InputField, {
+      type: "input",
+      name: "test",
+      value: "",
+      defaultValue: "",
+      mode: "text",
+    });
+    const inputElement = screen.getByRole("textbox");
+    fireEvent.change(inputElement, { target: { value: "Test value" } });
+    expect(form.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..ac5b9a0
--- /dev/null
+++ b/tests/components/FormBuilder/MultiSelectCheckboxesField.test.tsx
@@ -0,0 +1,38 @@
+import { describe, it, expect } from "vitest";
+import { screen, fireEvent } from "@testing-library/react";
+import { renderFormField } from "tests/helpers/renderFormField";
+import {
+  MultiSelectCheckboxes,
+  MultiSelectCheckboxesFieldProps,
+} from "#/components";
+
+describe("MultiSelectCheckboxes", () => {
+  const field: MultiSelectCheckboxesFieldProps = {
+    type: "multi_select_checkbox",
+    name: "test",
+    value: "",
+    options: [
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
+    ],
+  };
+
+  it("renders checkboxes for each option", () => {
+    renderFormField(MultiSelectCheckboxes, field);
+    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 { form } = renderFormField(MultiSelectCheckboxes, field);
+    const checkbox1 = screen.getByLabelText("Option 1");
+    const checkbox2 = screen.getByLabelText("Option 2");
+    fireEvent.click(checkbox1);
+    fireEvent.click(checkbox2);
+    expect(form.getValues(field.name)).toEqual(["option1", "option2"]);
+    fireEvent.click(checkbox1);
+    expect(form.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..11e4190
--- /dev/null
+++ b/tests/components/FormBuilder/RadioGroupField.test.tsx
@@ -0,0 +1,43 @@
+import { describe, it, expect } from "vitest";
+import { screen, fireEvent } from "@testing-library/react";
+import { renderFormField } from "tests/helpers/renderFormField";
+import { RadioGroupField, RadioGroupFieldProps } from "#/components";
+
+describe("RadioGroupField", () => {
+  const field: RadioGroupFieldProps = {
+    type: "radio_group",
+    name: "test",
+    value: "",
+    sections: [
+      {
+        label: "Test",
+        description: "Test description",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+        ],
+      },
+    ],
+  };
+
+  it("renders radio buttons for each option", () => {
+    renderFormField(RadioGroupField, field);
+
+    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 { form } = renderFormField(RadioGroupField, field);
+
+    const radio1 = screen.getByLabelText("Option 1");
+    const radio2 = screen.getByLabelText("Option 2");
+
+    fireEvent.click(radio1);
+    expect(form.getValues("test")).toBe("option1");
+    fireEvent.click(radio2);
+    expect(form.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..e4561cb
--- /dev/null
+++ b/tests/components/FormBuilder/RichTextEditorField.test.tsx
@@ -0,0 +1,36 @@
+import { describe, it, expect, vi } from "vitest";
+import { screen, act } from "@testing-library/react";
+import { renderFormField } from "tests/helpers/renderFormField";
+import { RichTextEditorField, RichTextEditorFieldProps } from "#/components";
+
+describe("RichTextEditorField", () => {
+  const field: RichTextEditorFieldProps = {
+    type: "wysiwyg",
+    name: "test",
+    value: "",
+  };
+
+  it("renders a rich text editor", async () => {
+    const { container } = renderFormField(RichTextEditorField, field);
+    expect(screen.getByText("Loading")).toBeInTheDocument();
+    await act(() => vi.dynamicImportSettled());
+    expect(container.querySelector(".jodit-wysiwyg")).toBeInTheDocument();
+  });
+
+  it("updates the form state when the editor content changes", async () => {
+    const { form, container } = renderFormField(RichTextEditorField, field);
+    await act(() => vi.dynamicImportSettled());
+    const editorElement = container.querySelector(".jodit-wysiwyg");
+
+    if (!editorElement) {
+      throw new Error("Editor element not found");
+    }
+
+    await act(async () => {
+      editorElement.innerHTML = "<p>Test content</p>";
+      editorElement.dispatchEvent(new Event("blur"));
+    });
+
+    expect(form.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..5de3f95
--- /dev/null
+++ b/tests/components/FormBuilder/SwitchField.test.tsx
@@ -0,0 +1,28 @@
+import { describe, it, expect } from "vitest";
+import { screen, fireEvent } from "@testing-library/react";
+import { renderFormField } from "tests/helpers/renderFormField";
+import { SwitchField, SwitchFieldProps } from "#/components";
+
+describe("SwitchField", () => {
+  const field: SwitchFieldProps = { type: "switch", name: "test", value: "" };
+
+  it("renders a switch element", () => {
+    renderFormField(SwitchField, field);
+    const switchElement = screen.getByRole("switch");
+    expect(switchElement).toBeInTheDocument();
+  });
+
+  it("updates the form state when the switch is toggled", () => {
+    const { form } = renderFormField(SwitchField, field);
+
+    const switchElement = screen.getByRole("switch");
+    fireEvent.click(switchElement);
+    expect(form.getValues("test")).toBe(true);
+  });
+
+  it("disables the switch when the disabled prop is set to true", () => {
+    renderFormField(SwitchField, { ...field, disabled: true });
+    const switchElement = screen.getByRole("switch");
+    expect(switchElement).toBeDisabled();
+  });
+});
diff --git a/tests/components/FormBuilder/TextAreaField.test.tsx b/tests/components/FormBuilder/TextAreaField.test.tsx
new file mode 100644
index 0000000..bd3683d
--- /dev/null
+++ b/tests/components/FormBuilder/TextAreaField.test.tsx
@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import { screen, fireEvent } from "@testing-library/react";
+import { renderFormField } from "tests/helpers/renderFormField";
+import { TextAreaField, TextAreaFieldProps } from "#/components";
+
+describe("TextAreaField", () => {
+  const field: TextAreaFieldProps = {
+    type: "textarea",
+    name: "test",
+    value: "",
+  };
+
+  it("renders a textarea element", () => {
+    renderFormField(TextAreaField, field);
+
+    const textareaElement = screen.getByRole("textbox");
+    expect(textareaElement).toBeInTheDocument();
+  });
+
+  // it("applies the appropriate validation rules", () => {
+  //   const field = { type: "textarea", name: "test", required: true };
+  //   renderFormField(TextAreaField, field);
+  //   const textareaElement = screen.getByRole("textbox");
+  //   fireEvent.change(textareaElement, { target: { value: "" } });
+  //   expect(textareaElement).toBeInvalid();
+  // });
+  it("applies the disabled prop when set to true", () => {
+    renderFormField(TextAreaField, { ...field, disabled: true });
+    const textareaElement = screen.getByRole("textbox");
+    expect(textareaElement).toBeDisabled();
+  });
+
+  it("updates the form state correctly when interacted with", () => {
+    const { form } = renderFormField(TextAreaField, field);
+    const textareaElement = screen.getByRole("textbox");
+    fireEvent.change(textareaElement, { target: { value: "Test value" } });
+    expect(form.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..bdc2dfb
--- /dev/null
+++ b/tests/components/FormBuilder/useFormField.test.tsx
@@ -0,0 +1,40 @@
+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";
+import { renderHookWithError } from "../../../tests/setup";
+
+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(() => renderHookWithError(() => 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..559a236
--- /dev/null
+++ b/tests/components/ui/Form.test.tsx
@@ -0,0 +1,87 @@
+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" }}
+        defaultValue=""
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Test Field</FormLabel>
+            <FormControl>
+              <input {...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/helpers/renderFormField.tsx b/tests/helpers/renderFormField.tsx
new file mode 100644
index 0000000..218d563
--- /dev/null
+++ b/tests/helpers/renderFormField.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import { RenderResult, render, renderHook } from "@testing-library/react";
+import { useForm, FormProvider, UseFormProps } from "react-hook-form";
+import { CommonFieldProps, FormFieldProps } from "#/components";
+
+export const renderFormField = (
+  FieldComponent: unknown,
+  field: CommonFieldProps<FormFieldProps>["field"],
+  formProps?: UseFormProps
+): {
+  form: CommonFieldProps<FormFieldProps>["form"];
+} & RenderResult => {
+  const { result } = renderHook(() => useForm(formProps));
+  const form = result.current;
+
+  const Component = FieldComponent as React.ElementType<
+    CommonFieldProps<FormFieldProps>
+  >;
+
+  return {
+    form,
+    ...render(
+      <FormProvider {...form}>
+        <Component form={form} field={field} />
+      </FormProvider>
+    ),
+  };
+};
diff --git a/tests/setup.js b/tests/setup.js
deleted file mode 100644
index 971941d..0000000
--- a/tests/setup.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { expect, afterEach } from "vitest";
-import { cleanup } from "@testing-library/react";
-import * as matchers from "@testing-library/jest-dom/matchers";
-
-expect.extend(matchers);
-
-afterEach(() => {
-  cleanup();
-});
diff --git a/tests/setup.ts b/tests/setup.ts
new file mode 100644
index 0000000..fdd50f9
--- /dev/null
+++ b/tests/setup.ts
@@ -0,0 +1,69 @@
+import React from "react";
+import { expect, afterEach, vi } from "vitest";
+import { cleanup, renderHook } 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> {}
+}
+const mockI18n = () => {
+  vi.mock("react-i18next", () => ({
+    // Mock hook
+    useTranslation: () => ({
+      t: (k: string) => k,
+      i18n: {
+        changeLanguage: () => new Promise(() => {}),
+      },
+    }),
+    // High Order Component as a function returning a function
+    withTranslation: () => (Component) => (props) =>
+      React.createElement(Component, { ...props, t: (k) => k }),
+    // Trans component as a functional component
+    Trans: ({ children, i18nKey }) => children || i18nKey,
+    // Provider can be simplified to just return children for testing purposes
+    I18nextProvider: ({ children }) => children,
+    initReactI18next: {
+      type: "3rdParty",
+      init: vi.fn(),
+    },
+  }));
+};
+
+expect.extend(matchers);
+
+beforeEach(() => {
+  mockI18n();
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+const suppressConsoleError = () => {
+  const logSpy = vi.spyOn(console, "log").mockImplementation(() => undefined);
+  const errorSpy = vi
+    .spyOn(console, "error")
+    .mockImplementation(() => undefined);
+
+  return () => {
+    errorSpy.mockRestore();
+    logSpy.mockRestore();
+  };
+};
+
+export const renderHookWithError = (...args: unknown[]) => {
+  let error: unknown;
+  const restore = suppressConsoleError();
+
+  try {
+    // @ts-ignore
+    renderHook(...args);
+  } catch (ex) {
+    error = ex;
+  }
+
+  restore();
+  throw error;
+};
diff --git a/tsconfig.json b/tsconfig.json
index b7204cc..ecc0dee 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "paths": { "#/*": ["./src/*"] },
+    "paths": { "#/*": ["./src/*"], "tests/*": ["./tests/*"] },
     "declaration": true,
     "declarationMap": true,
     "emitDeclarationOnly": true,
@@ -15,6 +15,7 @@
     "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..fc32652 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -2,14 +2,22 @@ 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"),
+        tests: path.resolve(__dirname, "./tests"),
+      },
+    },
   })
 );