diff --git a/src/widgets/uptimekuma/component.test.jsx b/src/widgets/uptimekuma/component.test.jsx
new file mode 100644
index 000000000..7052d4a91
--- /dev/null
+++ b/src/widgets/uptimekuma/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/uptimekuma/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "uptimekuma" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("uptimekuma.up")).toBeInTheDocument();
+    expect(screen.getByText("uptimekuma.down")).toBeInTheDocument();
+    expect(screen.getByText("uptimekuma.uptime")).toBeInTheDocument();
+    expect(screen.getByText("uptimekuma.incidents")).toBeInTheDocument();
+  });
+
+  it("computes site up/down and uptime percent when loaded (no incident)", () => {
+    useWidgetAPI.mockImplementation((_widget, endpoint) => {
+      if (endpoint === "status_page") return { data: { incident: null }, error: undefined };
+      if (endpoint === "heartbeat") {
+        return {
+          data: {
+            heartbeatList: {
+              a: [{ status: 1 }],
+              b: [{ status: 0 }],
+            },
+            uptimeList: { a: 0.5, b: 1 },
+          },
+          error: undefined,
+        };
+      }
+      return { data: undefined, error: undefined };
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "uptimekuma" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expectBlockValue(container, "uptimekuma.up", 1);
+    expectBlockValue(container, "uptimekuma.down", 1);
+    // avg = (0.5 + 1) / 2 = 0.75 => "75.0"
+    expectBlockValue(container, "uptimekuma.uptime", "75.0");
+  });
+});
diff --git a/src/widgets/uptimerobot/component.test.jsx b/src/widgets/uptimerobot/component.test.jsx
new file mode 100644
index 000000000..a5f7f3395
--- /dev/null
+++ b/src/widgets/uptimerobot/component.test.jsx
@@ -0,0 +1,48 @@
+// @vitest-environment jsdom
+
+import { screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+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/uptimerobot/component", () => {
+  const originalFetch = globalThis.fetch;
+
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+  });
+
+  it("renders placeholders initially and then renders multi-monitor counts", async () => {
+    globalThis.fetch = vi.fn(async () => ({
+      json: async () => ({
+        pagination: { total: 3 },
+        monitors: [{ status: 2 }, { status: 9 }, { status: 2 }],
+      }),
+    }));
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "uptimerobot" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(screen.getByText("uptimerobot.status")).toBeInTheDocument();
+    expect(screen.getByText("uptimerobot.uptime")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expectBlockValue(container, "uptimerobot.sitesUp", 2);
+      expectBlockValue(container, "uptimerobot.sitesDown", 1);
+    });
+  });
+});
diff --git a/src/widgets/urbackup/component.test.jsx b/src/widgets/urbackup/component.test.jsx
new file mode 100644
index 000000000..06223dba3
--- /dev/null
+++ b/src/widgets/urbackup/component.test.jsx
@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { afterEach, 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/urbackup/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2020-01-01T00:00:00Z"));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders placeholders while loading (optionally includes totalUsed)", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(
+      <Component service={{ widget: { type: "urbackup", fields: ["ok", "errored", "noRecent", "totalUsed"] } }} />,
+      {
+        settings: { hideErrors: false },
+      },
+    );
+
+    // Container filters children by widget.fields.
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("urbackup.ok")).toBeInTheDocument();
+    expect(screen.getByText("urbackup.errored")).toBeInTheDocument();
+    expect(screen.getByText("urbackup.noRecent")).toBeInTheDocument();
+    expect(screen.getByText("urbackup.totalUsed")).toBeInTheDocument();
+  });
+
+  it("renders ok/errored/noRecent and totalUsed when loaded", () => {
+    useWidgetAPI.mockReturnValue({
+      data: {
+        maxDays: 3,
+        clientStatuses: [
+          // ok
+          {
+            lastbackup: 1577836800,
+            lastbackup_image: 1577836800,
+            file_ok: true,
+            image_ok: true,
+            image_not_supported: false,
+            image_disabled: false,
+          },
+          // errored
+          {
+            lastbackup: 1577836800,
+            lastbackup_image: 1577836800,
+            file_ok: false,
+            image_ok: true,
+            image_not_supported: false,
+            image_disabled: false,
+          },
+          // no recent
+          {
+            lastbackup: 0,
+            lastbackup_image: 0,
+            file_ok: true,
+            image_ok: true,
+            image_not_supported: false,
+            image_disabled: false,
+          },
+        ],
+        diskUsage: [{ used: 1 }, { used: 2 }],
+      },
+      error: undefined,
+    });
+
+    const service = { widget: { type: "urbackup", fields: ["ok", "errored", "noRecent", "totalUsed"] } };
+    const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    expectBlockValue(container, "urbackup.ok", 1);
+    expectBlockValue(container, "urbackup.errored", 1);
+    expectBlockValue(container, "urbackup.noRecent", 1);
+    expectBlockValue(container, "urbackup.totalUsed", 3);
+  });
+});
diff --git a/src/widgets/vikunja/component.test.jsx b/src/widgets/vikunja/component.test.jsx
new file mode 100644
index 000000000..494d4f49e
--- /dev/null
+++ b/src/widgets/vikunja/component.test.jsx
@@ -0,0 +1,74 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { afterEach, 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/vikunja/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2020-01-01T00:00:00Z"));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "vikunja" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("vikunja.projects")).toBeInTheDocument();
+    expect(screen.getByText("vikunja.tasks7d")).toBeInTheDocument();
+    expect(screen.getByText("vikunja.tasksOverdue")).toBeInTheDocument();
+    expect(screen.getByText("vikunja.tasksInProgress")).toBeInTheDocument();
+  });
+
+  it("computes project/task stats when loaded", () => {
+    useWidgetAPI.mockImplementation((_widget, endpoint) => {
+      if (endpoint === "projects") return { data: [{ id: 1 }, { id: -1 }], error: undefined };
+      if (endpoint === "tasks") {
+        return {
+          data: [
+            { dueDateIsDefault: false, dueDate: "2020-01-02T00:00:00Z", inProgress: true },
+            { dueDateIsDefault: false, dueDate: "2019-12-31T00:00:00Z", inProgress: false },
+            { dueDateIsDefault: true, dueDate: "2099-01-01T00:00:00Z", inProgress: false },
+          ],
+          error: undefined,
+        };
+      }
+      return { data: undefined, error: undefined };
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "vikunja" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    // projects filters id > 0 => 1
+    expectBlockValue(container, "vikunja.projects", 1);
+    // tasks7d includes both non-default dueDate tasks (both <= one week)
+    expectBlockValue(container, "vikunja.tasks7d", 2);
+    // overdue includes dueDate <= now => 1 (2019-12-31)
+    expectBlockValue(container, "vikunja.tasksOverdue", 1);
+    // inProgress => 1
+    expectBlockValue(container, "vikunja.tasksInProgress", 1);
+  });
+});
diff --git a/src/widgets/wallos/component.test.jsx b/src/widgets/wallos/component.test.jsx
new file mode 100644
index 000000000..f03fd03fa
--- /dev/null
+++ b/src/widgets/wallos/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/wallos/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("defaults fields to 4 and filters loading placeholders accordingly", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const service = { widget: { type: "wallos" } };
+    const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    expect(service.widget.fields).toEqual([
+      "activeSubscriptions",
+      "nextRenewingSubscription",
+      "thisMonthlyCost",
+      "nextMonthlyCost",
+    ]);
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("wallos.activeSubscriptions")).toBeInTheDocument();
+    expect(screen.getByText("wallos.nextRenewingSubscription")).toBeInTheDocument();
+    expect(screen.getByText("wallos.thisMonthlyCost")).toBeInTheDocument();
+    expect(screen.getByText("wallos.nextMonthlyCost")).toBeInTheDocument();
+    expect(screen.queryByText("wallos.previousMonthlyCost")).toBeNull();
+  });
+
+  it("renders subscription and monthly cost values when loaded", () => {
+    useWidgetAPI.mockImplementation((_widget, endpoint) => {
+      if (endpoint === "get_subscriptions") return { data: { subscriptions: [{ name: "Sub" }] }, error: undefined };
+      if (endpoint === "get_monthly_cost") return { data: { localized_monthly_cost: "$10" }, error: undefined };
+      return { data: undefined, error: undefined };
+    });
+
+    const service = {
+      widget: {
+        type: "wallos",
+        fields: ["activeSubscriptions", "nextRenewingSubscription", "thisMonthlyCost", "nextMonthlyCost"],
+      },
+    };
+    const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    expectBlockValue(container, "wallos.activeSubscriptions", 1);
+    expectBlockValue(container, "wallos.nextRenewingSubscription", "Sub");
+    expectBlockValue(container, "wallos.thisMonthlyCost", "$10");
+    expectBlockValue(container, "wallos.nextMonthlyCost", "$10");
+  });
+});
diff --git a/src/widgets/watchtower/component.test.jsx b/src/widgets/watchtower/component.test.jsx
new file mode 100644
index 000000000..03cf94bdd
--- /dev/null
+++ b/src/widgets/watchtower/component.test.jsx
@@ -0,0 +1,52 @@
+// @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/watchtower/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "watchtower" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+    expect(screen.getByText("watchtower.containers_scanned")).toBeInTheDocument();
+    expect(screen.getByText("watchtower.containers_updated")).toBeInTheDocument();
+    expect(screen.getByText("watchtower.containers_failed")).toBeInTheDocument();
+  });
+
+  it("renders metrics when loaded", () => {
+    useWidgetAPI.mockReturnValue({
+      data: { watchtower_containers_scanned: 1, watchtower_containers_updated: 2, watchtower_containers_failed: 3 },
+      error: undefined,
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "watchtower" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expectBlockValue(container, "watchtower.containers_scanned", 1);
+    expectBlockValue(container, "watchtower.containers_updated", 2);
+    expectBlockValue(container, "watchtower.containers_failed", 3);
+  });
+});
diff --git a/src/widgets/wgeasy/component.test.jsx b/src/widgets/wgeasy/component.test.jsx
new file mode 100644
index 000000000..40c1d6180
--- /dev/null
+++ b/src/widgets/wgeasy/component.test.jsx
@@ -0,0 +1,64 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { afterEach, 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/wgeasy/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2020-01-01T00:00:00Z"));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("sets default fields and renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const service = { widget: { type: "wgeasy" } };
+    const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    expect(service.widget.fields).toEqual(["connected", "enabled", "total"]);
+    // Container filters by widget.fields; "disabled" is not included by default.
+    expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+    expect(screen.getByText("wgeasy.connected")).toBeInTheDocument();
+    expect(screen.getByText("wgeasy.enabled")).toBeInTheDocument();
+    expect(screen.queryByText("wgeasy.disabled")).toBeNull();
+    expect(screen.getByText("wgeasy.total")).toBeInTheDocument();
+  });
+
+  it("computes enabled/disabled/connected counts when loaded", () => {
+    useWidgetAPI.mockReturnValue({
+      data: [
+        { enabled: true, latestHandshakeAt: "2020-01-01T00:00:00Z" },
+        { enabled: true, latestHandshakeAt: "2019-12-31T23:00:00Z" },
+        { enabled: false, latestHandshakeAt: "2019-12-30T00:00:00Z" },
+      ],
+      error: undefined,
+    });
+
+    const service = { widget: { type: "wgeasy", threshold: 2 } };
+    const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    // enabled=2, disabled=1; connected uses threshold minutes (2min) so only the first handshake counts.
+    expectBlockValue(container, "wgeasy.enabled", 2);
+    expectBlockValue(container, "wgeasy.connected", 1);
+    expectBlockValue(container, "wgeasy.total", 3);
+  });
+});
diff --git a/src/widgets/whatsupdocker/component.test.jsx b/src/widgets/whatsupdocker/component.test.jsx
new file mode 100644
index 000000000..df96f8cb9
--- /dev/null
+++ b/src/widgets/whatsupdocker/component.test.jsx
@@ -0,0 +1,50 @@
+// @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/whatsupdocker/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "whatsupdocker" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(2);
+    expect(screen.getByText("whatsupdocker.monitoring")).toBeInTheDocument();
+    expect(screen.getByText("whatsupdocker.updates")).toBeInTheDocument();
+  });
+
+  it("renders monitoring and updates counts when loaded", () => {
+    useWidgetAPI.mockReturnValue({
+      data: [{ updateAvailable: true }, { updateAvailable: false }, { updateAvailable: true }],
+      error: undefined,
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "whatsupdocker" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expectBlockValue(container, "whatsupdocker.monitoring", 3);
+    expectBlockValue(container, "whatsupdocker.updates", 2);
+  });
+});
diff --git a/src/widgets/xteve/component.test.jsx b/src/widgets/xteve/component.test.jsx
new file mode 100644
index 000000000..caeb1b2e5
--- /dev/null
+++ b/src/widgets/xteve/component.test.jsx
@@ -0,0 +1,52 @@
+// @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/xteve/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "xteve" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+    expect(screen.getByText("xteve.streams_all")).toBeInTheDocument();
+    expect(screen.getByText("xteve.streams_active")).toBeInTheDocument();
+    expect(screen.getByText("xteve.streams_xepg")).toBeInTheDocument();
+  });
+
+  it("renders counts when loaded", () => {
+    useWidgetAPI.mockReturnValue({
+      data: { "streams.all": 10, "streams.active": 2, "streams.xepg": 3 },
+      error: undefined,
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "xteve" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expectBlockValue(container, "xteve.streams_all", 10);
+    expectBlockValue(container, "xteve.streams_active", 2);
+    expectBlockValue(container, "xteve.streams_xepg", 3);
+  });
+});
diff --git a/src/widgets/yourspotify/component.test.jsx b/src/widgets/yourspotify/component.test.jsx
new file mode 100644
index 000000000..6e60b46b7
--- /dev/null
+++ b/src/widgets/yourspotify/component.test.jsx
@@ -0,0 +1,59 @@
+// @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/yourspotify/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders when any metric is NaN", () => {
+    useWidgetAPI.mockImplementation((_widget, endpoint) => {
+      if (endpoint === "songs") return { data: NaN, error: undefined };
+      if (endpoint === "time") return { data: 0, error: undefined };
+      if (endpoint === "artists") return { data: 0, error: undefined };
+      return { data: undefined, error: undefined };
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "yourspotify" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+    expect(screen.getByText("yourspotify.songs")).toBeInTheDocument();
+    expect(screen.getByText("yourspotify.time")).toBeInTheDocument();
+    expect(screen.getByText("yourspotify.artists")).toBeInTheDocument();
+  });
+
+  it("renders songs, time and artists when loaded", () => {
+    useWidgetAPI.mockImplementation((_widget, endpoint) => {
+      if (endpoint === "songs") return { data: 1, error: undefined };
+      if (endpoint === "time") return { data: 2000, error: undefined };
+      if (endpoint === "artists") return { data: 3, error: undefined };
+      return { data: undefined, error: undefined };
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "yourspotify" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expectBlockValue(container, "yourspotify.songs", 1);
+    expectBlockValue(container, "yourspotify.time", 2);
+    expectBlockValue(container, "yourspotify.artists", 3);
+  });
+});