diff --git a/src/widgets/proxmox/component.test.jsx b/src/widgets/proxmox/component.test.jsx
new file mode 100644
index 000000000..477c34f01
--- /dev/null
+++ b/src/widgets/proxmox/component.test.jsx
@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/proxmox/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "proxmox" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("proxmox.vms")).toBeInTheDocument();
+    expect(screen.getByText("proxmox.lxc")).toBeInTheDocument();
+    expect(screen.getByText("resources.cpu")).toBeInTheDocument();
+    expect(screen.getByText("resources.mem")).toBeInTheDocument();
+  });
+
+  it("renders VM/LXC totals and aggregated cpu/mem when nodes are present", () => {
+    useWidgetAPI.mockReturnValue({
+      data: {
+        data: [
+          { type: "qemu", template: 0, node: "n1", status: "running" },
+          { type: "qemu", template: 0, node: "n1", status: "stopped" },
+          { type: "lxc", template: 0, node: "n1", status: "running" },
+          { type: "node", node: "n1", status: "online", maxmem: 100, mem: 50, maxcpu: 4, cpu: 0.25 },
+        ],
+      },
+      error: undefined,
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "proxmox" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expectBlockValue(container, "proxmox.vms", "1 / 2");
+    expectBlockValue(container, "proxmox.lxc", "1 / 1");
+    // cpu% = (usedCpu / maxCpu)*100 = ((0.25*4)/4)*100 = 25
+    expectBlockValue(container, "resources.cpu", 25);
+    // mem% = (50/100)*100 = 50
+    expectBlockValue(container, "resources.mem", 50);
+  });
+});
diff --git a/src/widgets/proxmoxvm/component.test.jsx b/src/widgets/proxmoxvm/component.test.jsx
new file mode 100644
index 000000000..f535d1d3b
--- /dev/null
+++ b/src/widgets/proxmoxvm/component.test.jsx
@@ -0,0 +1,49 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useSWR } = vi.hoisted(() => ({ useSWR: vi.fn() }));
+vi.mock("swr", () => ({ default: useSWR }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/proxmoxvm/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useSWR.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(
+      <Component service={{ widget: { type: "proxmoxvm", node: "n1", vmid: "100" } }} />,
+      { settings: { hideErrors: false } },
+    );
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(2);
+    expect(screen.getByText("resources.cpu")).toBeInTheDocument();
+    expect(screen.getByText("resources.mem")).toBeInTheDocument();
+  });
+
+  it("renders cpu percent and mem bytes when loaded", () => {
+    useSWR.mockReturnValue({ data: { cpu: 0.5, mem: 1024 }, error: undefined });
+
+    const { container } = renderWithProviders(
+      <Component service={{ widget: { type: "proxmoxvm", node: "n1", vmid: "100" } }} />,
+      { settings: { hideErrors: false } },
+    );
+
+    expectBlockValue(container, "resources.cpu", 50);
+    expectBlockValue(container, "resources.mem", 1024);
+  });
+});
diff --git a/src/widgets/pterodactyl/component.test.jsx b/src/widgets/pterodactyl/component.test.jsx
new file mode 100644
index 000000000..66762860e
--- /dev/null
+++ b/src/widgets/pterodactyl/component.test.jsx
@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/pterodactyl/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "pterodactyl" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(2);
+    expect(screen.getByText("pterodactyl.nodes")).toBeInTheDocument();
+    expect(screen.getByText("pterodactyl.servers")).toBeInTheDocument();
+  });
+
+  it("renders nodes and derived servers total when loaded", () => {
+    useWidgetAPI.mockReturnValue({
+      data: {
+        data: [
+          { attributes: { relationships: { servers: { data: [{ id: 1 }, { id: 2 }] } } } },
+          { attributes: { relationships: { servers: { data: [{ id: 3 }] } } } },
+        ],
+      },
+      error: undefined,
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "pterodactyl" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expectBlockValue(container, "pterodactyl.nodes", 2);
+    expectBlockValue(container, "pterodactyl.servers", 3);
+  });
+});
diff --git a/src/widgets/pyload/component.test.jsx b/src/widgets/pyload/component.test.jsx
new file mode 100644
index 000000000..a34dcb45d
--- /dev/null
+++ b/src/widgets/pyload/component.test.jsx
@@ -0,0 +1,60 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/pyload/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "pyload" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("pyload.speed")).toBeInTheDocument();
+    expect(screen.getByText("pyload.active")).toBeInTheDocument();
+    expect(screen.getByText("pyload.queue")).toBeInTheDocument();
+    expect(screen.getByText("pyload.total")).toBeInTheDocument();
+  });
+
+  it("renders error UI when endpoint errors", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: { message: "nope" } });
+
+    renderWithProviders(<Component service={{ widget: { type: "pyload" } }} />, { settings: { hideErrors: false } });
+
+    expect(screen.getAllByText(/widget\.api_error/i).length).toBeGreaterThan(0);
+    expect(screen.getByText("nope")).toBeInTheDocument();
+  });
+
+  it("renders status counts when loaded", () => {
+    useWidgetAPI.mockReturnValue({ data: { speed: 100, active: 1, queue: 2, total: 3 }, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "pyload" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expectBlockValue(container, "pyload.speed", 100);
+    expectBlockValue(container, "pyload.active", 1);
+    expectBlockValue(container, "pyload.queue", 2);
+    expectBlockValue(container, "pyload.total", 3);
+  });
+});
diff --git a/src/widgets/qbittorrent/component.test.jsx b/src/widgets/qbittorrent/component.test.jsx
new file mode 100644
index 000000000..d2f46095f
--- /dev/null
+++ b/src/widgets/qbittorrent/component.test.jsx
@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+vi.mock("../../components/widgets/queue/queueEntry", () => ({
+  default: ({ title }) => <div data-testid="queue-entry">{title}</div>,
+}));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/qbittorrent/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "qbittorrent" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("qbittorrent.leech")).toBeInTheDocument();
+    expect(screen.getByText("qbittorrent.download")).toBeInTheDocument();
+    expect(screen.getByText("qbittorrent.seed")).toBeInTheDocument();
+    expect(screen.getByText("qbittorrent.upload")).toBeInTheDocument();
+  });
+
+  it("computes leech/seed counts and upload/download rates, and can render leech progress entries", () => {
+    useWidgetAPI.mockReturnValue({
+      data: [
+        { name: "A", dlspeed: 10, upspeed: 1, progress: 1, state: "uploading" },
+        { name: "B", dlspeed: 5, upspeed: 2, progress: 0.5, state: "downloading", eta: 60, size: 100, amount_left: 50 },
+      ],
+      error: undefined,
+    });
+
+    const service = { widget: { type: "qbittorrent", enableLeechProgress: true } };
+    const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    // total=2, completed=1 => leech=1
+    expectBlockValue(container, "qbittorrent.leech", 1);
+    expectBlockValue(container, "qbittorrent.seed", 1);
+    expectBlockValue(container, "qbittorrent.download", 15);
+    expectBlockValue(container, "qbittorrent.upload", 3);
+
+    expect(screen.getAllByTestId("queue-entry").map((el) => el.textContent)).toEqual(["B"]);
+  });
+});
diff --git a/src/widgets/qnap/component.test.jsx b/src/widgets/qnap/component.test.jsx
new file mode 100644
index 000000000..c08450258
--- /dev/null
+++ b/src/widgets/qnap/component.test.jsx
@@ -0,0 +1,66 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/qnap/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "qnap" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("qnap.cpuUsage")).toBeInTheDocument();
+    expect(screen.getByText("qnap.memUsage")).toBeInTheDocument();
+    expect(screen.getByText("qnap.systemTempC")).toBeInTheDocument();
+    expect(screen.getByText("qnap.poolUsage")).toBeInTheDocument();
+  });
+
+  it("renders computed mem and pool usage for multi-volume payload", () => {
+    useWidgetAPI.mockReturnValue({
+      data: {
+        system: {
+          cpu_usage: { _cdata: "50 %" },
+          total_memory: { _cdata: 100 },
+          free_memory: { _cdata: 25 },
+          sys_tempc: { _text: 40 },
+        },
+        volume: {
+          volumeUseList: { volumeUse: [{ total_size: { _cdata: "100" }, free_size: { _cdata: "50" } }] },
+          volumeList: { volume: [{ volumeLabel: { _cdata: "DataVol1" } }] },
+        },
+      },
+      error: undefined,
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "qnap" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expectBlockValue(container, "qnap.cpuUsage", "50");
+    // mem% = ((100-25)/100)*100 = 75
+    expectBlockValue(container, "qnap.memUsage", "75");
+    // pool% = ((100-50)/100)*100 = 50
+    expectBlockValue(container, "qnap.poolUsage", "50");
+  });
+});
diff --git a/src/widgets/radarr/component.test.jsx b/src/widgets/radarr/component.test.jsx
new file mode 100644
index 000000000..7637f0d3c
--- /dev/null
+++ b/src/widgets/radarr/component.test.jsx
@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+vi.mock("../../components/widgets/queue/queueEntry", () => ({
+  default: ({ title }) => <div data-testid="queue-entry">{title}</div>,
+}));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/radarr/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "radarr" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("radarr.wanted")).toBeInTheDocument();
+    expect(screen.getByText("radarr.missing")).toBeInTheDocument();
+    expect(screen.getByText("radarr.queued")).toBeInTheDocument();
+    expect(screen.getByText("radarr.movies")).toBeInTheDocument();
+  });
+
+  it("renders counts and queue entries when enabled", () => {
+    useWidgetAPI.mockImplementation((_widget, endpoint) => {
+      if (endpoint === "movie")
+        return { data: { wanted: 1, missing: 2, have: 3, all: [{ id: 10, title: "Movie" }] }, error: undefined };
+      if (endpoint === "queue/status") return { data: { totalCount: 1 }, error: undefined };
+      if (endpoint === "queue/details")
+        return {
+          data: [{ movieId: 10, sizeLeft: 50, size: 100, timeLeft: "1m", trackedDownloadState: "importPending" }],
+          error: undefined,
+        };
+      return { data: undefined, error: undefined };
+    });
+
+    const service = { widget: { type: "radarr", enableQueue: true } };
+    const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    expectBlockValue(container, "radarr.wanted", 1);
+    expectBlockValue(container, "radarr.missing", 2);
+    expectBlockValue(container, "radarr.queued", 1);
+    expectBlockValue(container, "radarr.movies", 3);
+    expect(screen.getAllByTestId("queue-entry").map((el) => el.textContent)).toEqual(["Movie"]);
+  });
+});
diff --git a/src/widgets/readarr/component.test.jsx b/src/widgets/readarr/component.test.jsx
new file mode 100644
index 000000000..ac66fdee8
--- /dev/null
+++ b/src/widgets/readarr/component.test.jsx
@@ -0,0 +1,54 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/readarr/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "readarr" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+    expect(screen.getByText("readarr.wanted")).toBeInTheDocument();
+    expect(screen.getByText("readarr.queued")).toBeInTheDocument();
+    expect(screen.getByText("readarr.books")).toBeInTheDocument();
+  });
+
+  it("renders counts when loaded", () => {
+    useWidgetAPI.mockImplementation((_widget, endpoint) => {
+      if (endpoint === "book") return { data: { have: 10 }, error: undefined };
+      if (endpoint === "wanted/missing") return { data: { totalRecords: 2 }, error: undefined };
+      if (endpoint === "queue/status") return { data: { totalCount: 3 }, error: undefined };
+      return { data: undefined, error: undefined };
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "readarr" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expectBlockValue(container, "readarr.wanted", 2);
+    expectBlockValue(container, "readarr.queued", 3);
+    expectBlockValue(container, "readarr.books", 10);
+  });
+});
diff --git a/src/widgets/romm/component.test.jsx b/src/widgets/romm/component.test.jsx
new file mode 100644
index 000000000..cabe6dec9
--- /dev/null
+++ b/src/widgets/romm/component.test.jsx
@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/romm/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("defaults fields to 4 and shows placeholders (container filters to selected fields)", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const service = { widget: { type: "romm" } };
+    const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    expect(service.widget.fields).toEqual(["platforms", "totalRoms", "saves", "states"]);
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("romm.platforms")).toBeInTheDocument();
+    expect(screen.getByText("romm.totalRoms")).toBeInTheDocument();
+    expect(screen.getByText("romm.saves")).toBeInTheDocument();
+    expect(screen.getByText("romm.states")).toBeInTheDocument();
+    expect(screen.queryByText("romm.screenshots")).toBeNull();
+    expect(screen.queryByText("romm.totalfilesize")).toBeNull();
+  });
+
+  it("caps widget.fields at 4 entries", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const service = { widget: { type: "romm", fields: ["platforms", "totalRoms", "saves", "states", "screenshots"] } };
+    renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    expect(service.widget.fields).toEqual(["platforms", "totalRoms", "saves", "states"]);
+  });
+
+  it("renders values when loaded (and includes additional fields when explicitly selected)", () => {
+    useWidgetAPI.mockReturnValue({
+      data: { PLATFORMS: 1, ROMS: 2, SAVES: 3, STATES: 4, SCREENSHOTS: 5, FILESIZE: 6 },
+      error: undefined,
+    });
+
+    const service = { widget: { type: "romm", fields: ["platforms", "totalRoms", "screenshots", "totalfilesize"] } };
+    const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expectBlockValue(container, "romm.platforms", 1);
+    expectBlockValue(container, "romm.totalRoms", 2);
+    expectBlockValue(container, "romm.screenshots", 5);
+    expectBlockValue(container, "romm.totalfilesize", 6);
+  });
+});
diff --git a/src/widgets/sabnzbd/component.test.jsx b/src/widgets/sabnzbd/component.test.jsx
new file mode 100644
index 000000000..a81db1399
--- /dev/null
+++ b/src/widgets/sabnzbd/component.test.jsx
@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/sabnzbd/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "sabnzbd" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+    expect(screen.getByText("sabnzbd.rate")).toBeInTheDocument();
+    expect(screen.getByText("sabnzbd.queue")).toBeInTheDocument();
+    expect(screen.getByText("sabnzbd.timeleft")).toBeInTheDocument();
+  });
+
+  it("renders error UI when endpoint errors", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: { message: "nope" } });
+
+    renderWithProviders(<Component service={{ widget: { type: "sabnzbd" } }} />, { settings: { hideErrors: false } });
+
+    expect(screen.getAllByText(/widget\.api_error/i).length).toBeGreaterThan(0);
+    expect(screen.getByText("nope")).toBeInTheDocument();
+  });
+
+  it("renders speed, queue count and time left when loaded", () => {
+    useWidgetAPI.mockReturnValue({
+      data: { queue: { speed: "1.0 M", noofslots: 2, timeleft: "00:01:00" } },
+      error: undefined,
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "sabnzbd" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    // fromUnits("1.0 M") => 1 * 1024**2
+    expectBlockValue(container, "sabnzbd.rate", 1024 ** 2);
+    expectBlockValue(container, "sabnzbd.queue", 2);
+    expectBlockValue(container, "sabnzbd.timeleft", "00:01:00");
+  });
+});
diff --git a/vitest.setup.js b/vitest.setup.js
index 264ea83d2..50ac0e565 100644
--- a/vitest.setup.js
+++ b/vitest.setup.js
@@ -18,6 +18,7 @@ vi.mock("next-i18next", () => ({
       if (key === "common.bytes") return String(opts?.value ?? "");
       if (key === "common.bbytes") return String(opts?.value ?? "");
       if (key === "common.byterate") return String(opts?.value ?? "");
+      if (key === "common.bibyterate") return String(opts?.value ?? "");
       if (key === "common.bitrate") return String(opts?.value ?? "");
       if (key === "common.duration") return String(opts?.value ?? "");
       if (key === "common.ms") return String(opts?.value ?? "");