@primitiv-ui/react 0.1.14 → 0.1.16

package/src/Checkbox/__tests__/Checkbox.basic-rendering.test.tsx

@@ -1,41 +1,79 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 
 import { Checkbox } from "../Checkbox";
 
 describe("Checkbox basic rendering", () => {
-  it('renders a <button> with role="checkbox"', () => {
+  it("renders a real native <input type=checkbox> as the control", () => {
     // Arrange & Act
     render(<Checkbox.Root aria-label="Accept terms" />);
     const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
 
     // Assert
-    expect(checkbox.tagName).toBe("BUTTON");
+    expect(checkbox.tagName).toBe("INPUT");
+    expect(checkbox).toHaveAttribute("type", "checkbox");
   });
 
-  it('defaults aria-checked to "false"', () => {
+  it("wraps the input in a <label> so the visible box is clickable", () => {
     // Arrange & Act
     render(<Checkbox.Root aria-label="Accept terms" />);
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
 
     // Assert
-    expect(checkbox).toHaveAttribute("aria-checked", "false");
+    expect(
+      screen.getByRole("checkbox", { name: "Accept terms" }).closest("label"),
+    ).not.toBeNull();
   });
 
-  it('defaults type="button" so the checkbox never submits an enclosing form', () => {
+  it("is unchecked by default", () => {
     // Arrange & Act
     render(<Checkbox.Root aria-label="Accept terms" />);
+
+    // Assert
+    expect(screen.getByRole("checkbox", { name: "Accept terms" })).not.toBeChecked();
+  });
+
+  it("forwards native input attributes (name, value, id) to the input", () => {
+    // Arrange & Act
+    render(
+      <Checkbox.Root id="c1" name="terms" value="accepted" aria-label="Accept terms" />,
+    );
     const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
 
     // Assert
-    expect(checkbox).toHaveAttribute("type", "button");
+    expect(checkbox).toHaveAttribute("id", "c1");
+    expect(checkbox).toHaveAttribute("name", "terms");
+    expect(checkbox).toHaveAttribute("value", "accepted");
   });
 
-  it('sets data-state="unchecked" on the root when unchecked', () => {
+  it("applies className to the box, not the hidden input", () => {
     // Arrange & Act
-    render(<Checkbox.Root aria-label="Accept terms" />);
+    render(<Checkbox.Root className="box" aria-label="Accept terms" />);
     const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
 
     // Assert
-    expect(checkbox).toHaveAttribute("data-state", "unchecked");
+    expect(checkbox).not.toHaveClass("box");
+    expect(checkbox.closest("label")).toHaveClass("box");
+  });
+
+  it("forwards a ref to the underlying input", () => {
+    // Arrange
+    const ref = createRef<HTMLInputElement>();
+
+    // Act
+    render(<Checkbox.Root ref={ref} aria-label="Accept terms" />);
+
+    // Assert
+    expect(ref.current).toBe(screen.getByRole("checkbox", { name: "Accept terms" }));
+  });
+
+  it('sets data-state="unchecked" on the box when unchecked', () => {
+    // Arrange & Act
+    const { container } = render(<Checkbox.Root aria-label="Accept terms" />);
+
+    // Assert
+    expect(container.querySelector("label")).toHaveAttribute(
+      "data-state",
+      "unchecked",
+    );
   });
 });

package/src/Checkbox/__tests__/Checkbox.contract.test.tsx

@@ -2,19 +2,21 @@ import { readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { dirname, resolve } from "node:path";
 
-import { render, screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
 
 import { Checkbox } from "../Checkbox";
+import { CheckedState } from "../types";
 
 /**
  * Auto-verification of the Checkbox styling contract (RFC 0004 §3.4 / D15). The
  * `data-*` half of `registry/components/checkbox/contract.json` is *derived from
  * and asserted against the rendered headless component* so it can never drift
- * from what the component actually emits. Checkbox is tri-state: its surface is
- * `data-state="checked" | "unchecked" | "indeterminate"` (always present) plus
- * `data-disabled=""` when disabled. The authored half (root class, parts, custom
- * properties) is a styling convention the headless layer does not emit and is
- * checked by the generator drift-guards instead.
+ * from what the component actually emits. The checkbox's `data-*` surface lives
+ * on the **wrapper box** (the styled root) — `data-state="checked" |
+ * "unchecked" | "indeterminate"` (always present) plus `data-disabled=""` when
+ * disabled. The authored half (classes, parts, custom properties) is a styling
+ * convention the headless layer does not emit and is checked by the generator
+ * drift-guards instead.
  */
 const contractPath = resolve(
   dirname(fileURLToPath(import.meta.url)),
@@ -23,6 +25,13 @@ const contractPath = resolve(
 
 const contract = JSON.parse(readFileSync(contractPath, "utf8"));
 
+/** The wrapper element is the contracted styling root. */
+function rootOf(container: HTMLElement): HTMLElement {
+  const root = container.querySelector("label");
+  if (!root) throw new Error("expected a Checkbox wrapper element");
+  return root;
+}
+
 /** Every `data-*` attribute name present on an element. */
 function dataAttributeNames(element: Element): string[] {
   return [...element.attributes]
@@ -37,30 +46,23 @@ describe("Checkbox styling contract", () => {
   );
 
   it("declares every data-* attribute as auto-verified against the component", () => {
-    // The Checkbox has no authored data-* surface; the whole contract is derived.
     expect(autoAttributes).toHaveLength(contract.dataAttributes.length);
   });
 
   it("emits exactly the contracted data-* attribute names across its states", () => {
     const emitted = new Set<string>();
     for (const ui of [
-      <Checkbox.Root key="checked" checked onCheckedChange={() => {}} aria-label="x">
-        <Checkbox.Indicator />
-      </Checkbox.Root>,
+      <Checkbox.Root key="checked" checked onCheckedChange={() => {}} aria-label="x" />,
       <Checkbox.Root
         key="indeterminate"
         checked="indeterminate"
         onCheckedChange={() => {}}
         aria-label="x"
-      >
-        <Checkbox.Indicator />
-      </Checkbox.Root>,
-      <Checkbox.Root key="disabled" disabled aria-label="x">
-        <Checkbox.Indicator />
-      </Checkbox.Root>,
+      />,
+      <Checkbox.Root key="disabled" disabled aria-label="x" />,
     ]) {
-      const { unmount } = render(ui);
-      for (const name of dataAttributeNames(screen.getByRole("checkbox"))) {
+      const { container, unmount } = render(ui);
+      for (const name of dataAttributeNames(rootOf(container))) {
         emitted.add(name);
       }
       unmount();
@@ -78,16 +80,12 @@ describe("Checkbox styling contract", () => {
     );
 
     for (const entry of stateEntries) {
-      const checked =
-        entry.value === "indeterminate"
-          ? ("indeterminate" as const)
-          : entry.value === "checked";
-      const { unmount } = render(
-        <Checkbox.Root checked={checked} onCheckedChange={() => {}} aria-label="x">
-          <Checkbox.Indicator />
-        </Checkbox.Root>,
+      const checked: CheckedState =
+        entry.value === "indeterminate" ? "indeterminate" : entry.value === "checked";
+      const { container, unmount } = render(
+        <Checkbox.Root checked={checked} onCheckedChange={() => {}} aria-label="x" />,
       );
-      expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", entry.value);
+      expect(rootOf(container)).toHaveAttribute("data-state", entry.value);
       unmount();
     }
   });
@@ -97,21 +95,12 @@ describe("Checkbox styling contract", () => {
       (attribute: { name: string }) => attribute.name === "data-disabled",
     );
 
-    render(
-      <Checkbox.Root disabled aria-label="x">
-        <Checkbox.Indicator />
-      </Checkbox.Root>,
-    );
-    expect(screen.getByRole("checkbox")).toHaveAttribute(entry.name, entry.value);
+    const { container } = render(<Checkbox.Root disabled aria-label="x" />);
+    expect(rootOf(container)).toHaveAttribute(entry.name, entry.value);
   });
 
   it("omits data-disabled when the documented condition does not hold", () => {
-    render(
-      <Checkbox.Root aria-label="x">
-        <Checkbox.Indicator />
-      </Checkbox.Root>,
-    );
-
-    expect(screen.getByRole("checkbox")).not.toHaveAttribute("data-disabled");
+    const { container } = render(<Checkbox.Root aria-label="x" />);
+    expect(rootOf(container)).not.toHaveAttribute("data-disabled");
   });
 });

package/src/Checkbox/__tests__/Checkbox.controlled-state.test.tsx

@@ -7,27 +7,22 @@ import { Checkbox } from "../Checkbox";
 describe("Checkbox controlled state", () => {
   it("reflects the controlled `checked` prop", () => {
     // Arrange & Act
-    const { rerender } = render(
-      <Checkbox.Root
-        checked={false}
-        onCheckedChange={() => {}}
-        aria-label="Accept terms"
-      />,
+    const { container, rerender } = render(
+      <Checkbox.Root checked={false} onCheckedChange={() => {}} aria-label="Accept terms" />,
     );
     const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-    expect(checkbox).toHaveAttribute("aria-checked", "false");
+    expect(checkbox).not.toBeChecked();
 
     rerender(
-      <Checkbox.Root
-        checked
-        onCheckedChange={() => {}}
-        aria-label="Accept terms"
-      />,
+      <Checkbox.Root checked onCheckedChange={() => {}} aria-label="Accept terms" />,
     );
 
     // Assert
-    expect(checkbox).toHaveAttribute("aria-checked", "true");
-    expect(checkbox).toHaveAttribute("data-state", "checked");
+    expect(checkbox).toBeChecked();
+    expect(container.querySelector("label")).toHaveAttribute(
+      "data-state",
+      "checked",
+    );
   });
 
   it("does not update its rendered state when the parent refuses to update `checked`", async () => {
@@ -46,20 +41,17 @@ describe("Checkbox controlled state", () => {
     // Act
     await user.click(checkbox);
 
-    // Assert: callback fired but the rendered state stays false because the
-    // parent did not flip the controlled prop.
+    // Assert: callback fired but the rendered state stays unchecked.
     expect(onCheckedChange).toHaveBeenCalledWith(true);
-    expect(checkbox).toHaveAttribute("aria-checked", "false");
-    expect(checkbox).toHaveAttribute("data-state", "unchecked");
+    expect(checkbox).not.toBeChecked();
   });
 
   it("lets a parent drive the value end to end", async () => {
     // Arrange
     const user = userEvent.setup();
     function Harness() {
-      // Start true so the pre-click state can only be correct if the
-      // controlled prop is honoured (a broken impl would fall back to
-      // defaultChecked=false and render the opposite).
+      // Start true so the pre-click state is only correct if the controlled
+      // prop is honoured (a broken impl would fall back to unchecked).
       const [checked, setChecked] = useState(true);
       return (
         <Checkbox.Root
@@ -71,12 +63,12 @@ describe("Checkbox controlled state", () => {
     }
     render(<Harness />);
     const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-    expect(checkbox).toHaveAttribute("aria-checked", "true");
+    expect(checkbox).toBeChecked();
 
     // Act & Assert
     await user.click(checkbox);
-    expect(checkbox).toHaveAttribute("aria-checked", "false");
+    expect(checkbox).not.toBeChecked();
     await user.click(checkbox);
-    expect(checkbox).toHaveAttribute("aria-checked", "true");
+    expect(checkbox).toBeChecked();
   });
 });

package/src/Checkbox/__tests__/Checkbox.disabled.test.tsx

@@ -1,15 +1,45 @@
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import { Checkbox } from "../Checkbox";
 
 describe("Checkbox disabled state", () => {
-  it('sets data-disabled="" on the root so CSS can target the disabled state', () => {
+  it("disables the underlying native input", () => {
     // Arrange & Act
     render(<Checkbox.Root disabled aria-label="Accept terms" />);
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
 
     // Assert
-    expect(checkbox).toHaveAttribute("data-disabled", "");
+    expect(screen.getByRole("checkbox", { name: "Accept terms" })).toBeDisabled();
   });
 
+  it('sets data-disabled="" on the box so CSS can target the disabled state', () => {
+    // Arrange & Act
+    const { container } = render(<Checkbox.Root disabled aria-label="Accept terms" />);
+
+    // Assert
+    expect(container.querySelector("label")).toHaveAttribute("data-disabled", "");
+  });
+
+  it("omits data-disabled when not disabled", () => {
+    // Arrange & Act
+    const { container } = render(<Checkbox.Root aria-label="Accept terms" />);
+
+    // Assert
+    expect(container.querySelector("label")).not.toHaveAttribute("data-disabled");
+  });
+
+  it("does not fire onCheckedChange when a disabled checkbox is clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(
+      <Checkbox.Root disabled onCheckedChange={onCheckedChange} aria-label="Accept terms" />,
+    );
+
+    // Act
+    await user.click(screen.getByRole("checkbox", { name: "Accept terms" }));
+
+    // Assert
+    expect(onCheckedChange).not.toHaveBeenCalled();
+  });
 });

package/src/Checkbox/__tests__/Checkbox.form.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Checkbox } from "../Checkbox";
+
+/**
+ * The checkbox is a real native input, so it participates in forms: a checked
+ * box submits its `value` under `name`, and an unchecked one submits nothing.
+ * The old `<button role="checkbox">` could do neither.
+ */
+describe("Checkbox form participation", () => {
+  function NewsletterForm({ onSubmit }: { onSubmit: (value: string | null) => void }) {
+    return (
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          const data = new FormData(event.currentTarget);
+          onSubmit(data.get("newsletter") as string | null);
+        }}
+      >
+        <Checkbox.Root name="newsletter" value="weekly" aria-label="Subscribe" />
+        <button type="submit">Save</button>
+      </form>
+    );
+  }
+
+  it("submits the value when checked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    render(<NewsletterForm onSubmit={onSubmit} />);
+
+    // Act
+    await user.click(screen.getByRole("checkbox", { name: "Subscribe" }));
+    await user.click(screen.getByRole("button", { name: "Save" }));
+
+    // Assert
+    expect(onSubmit).toHaveBeenCalledWith("weekly");
+  });
+
+  it("submits nothing when unchecked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    render(<NewsletterForm onSubmit={onSubmit} />);
+
+    // Act
+    await user.click(screen.getByRole("button", { name: "Save" }));
+
+    // Assert
+    expect(onSubmit).toHaveBeenCalledWith(null);
+  });
+});

package/src/Checkbox/__tests__/Checkbox.indeterminate.test.tsx

@@ -4,39 +4,34 @@ import userEvent from "@testing-library/user-event";
 import { Checkbox } from "../Checkbox";
 
 describe("Checkbox indeterminate state", () => {
-  it('exposes aria-checked="mixed" when defaultChecked is "indeterminate"', () => {
+  it('marks the input partially-checked (aria mixed) when defaultChecked is "indeterminate"', () => {
     // Arrange & Act
-    render(
-      <Checkbox.Root
-        defaultChecked="indeterminate"
-        aria-label="Accept terms"
-      />,
-    );
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+    render(<Checkbox.Root defaultChecked="indeterminate" aria-label="Accept terms" />);
 
     // Assert
-    expect(checkbox).toHaveAttribute("aria-checked", "mixed");
+    expect(
+      screen.getByRole("checkbox", { name: "Accept terms" }),
+    ).toBePartiallyChecked();
   });
 
-  it('sets data-state="indeterminate" on the root in indeterminate mode', () => {
+  it('sets data-state="indeterminate" on the box in indeterminate mode', () => {
     // Arrange & Act
-    render(
-      <Checkbox.Root
-        defaultChecked="indeterminate"
-        aria-label="Accept terms"
-      />,
+    const { container } = render(
+      <Checkbox.Root defaultChecked="indeterminate" aria-label="Accept terms" />,
     );
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
 
     // Assert
-    expect(checkbox).toHaveAttribute("data-state", "indeterminate");
+    expect(container.querySelector("label")).toHaveAttribute(
+      "data-state",
+      "indeterminate",
+    );
   });
 
   it("resolves to checked=true on the first click (WAI-ARIA tri-state convention)", async () => {
     // Arrange
     const user = userEvent.setup();
     const onCheckedChange = vi.fn();
-    render(
+    const { container } = render(
       <Checkbox.Root
         defaultChecked="indeterminate"
         onCheckedChange={onCheckedChange}
@@ -50,33 +45,32 @@ describe("Checkbox indeterminate state", () => {
 
     // Assert
     expect(onCheckedChange).toHaveBeenCalledWith(true);
-    expect(checkbox).toHaveAttribute("aria-checked", "true");
-    expect(checkbox).toHaveAttribute("data-state", "checked");
+    expect(checkbox).toBeChecked();
+    expect(checkbox).not.toBePartiallyChecked();
+    expect(container.querySelector("label")).toHaveAttribute(
+      "data-state",
+      "checked",
+    );
   });
 
   it('honours controlled checked="indeterminate" across re-renders', () => {
     // Arrange
-    const { rerender } = render(
-      <Checkbox.Root
-        checked={false}
-        onCheckedChange={() => {}}
-        aria-label="Accept terms"
-      />,
+    const { container, rerender } = render(
+      <Checkbox.Root checked={false} onCheckedChange={() => {}} aria-label="Accept terms" />,
     );
     const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-    expect(checkbox).toHaveAttribute("aria-checked", "false");
+    expect(checkbox).not.toBeChecked();
 
     // Act
     rerender(
-      <Checkbox.Root
-        checked="indeterminate"
-        onCheckedChange={() => {}}
-        aria-label="Accept terms"
-      />,
+      <Checkbox.Root checked="indeterminate" onCheckedChange={() => {}} aria-label="Accept terms" />,
     );
 
     // Assert
-    expect(checkbox).toHaveAttribute("aria-checked", "mixed");
-    expect(checkbox).toHaveAttribute("data-state", "indeterminate");
+    expect(checkbox).toBePartiallyChecked();
+    expect(container.querySelector("label")).toHaveAttribute(
+      "data-state",
+      "indeterminate",
+    );
   });
 });

package/src/Checkbox/__tests__/Checkbox.indicator.test.tsx

@@ -4,103 +4,80 @@ import userEvent from "@testing-library/user-event";
 import { Checkbox } from "../Checkbox";
 
 describe("Checkbox.Indicator", () => {
-  it("does not render its children when the checkbox is unchecked", () => {
-    // Arrange & Act
+  it("is always mounted, regardless of checked state", () => {
+    // Arrange & Act — unchecked, yet the mark is in the DOM (CSS hides it).
     render(
       <Checkbox.Root aria-label="Accept terms">
-        <Checkbox.Indicator>tick</Checkbox.Indicator>
-      </Checkbox.Root>,
-    );
-
-    // Assert
-    expect(screen.queryByText("tick")).not.toBeInTheDocument();
-  });
-
-  it("renders its children when the checkbox is checked", () => {
-    // Arrange & Act
-    render(
-      <Checkbox.Root defaultChecked aria-label="Accept terms">
-        <Checkbox.Indicator>tick</Checkbox.Indicator>
+        <Checkbox.Indicator data-testid="mark" />
       </Checkbox.Root>,
     );
 
     // Assert
-    expect(screen.getByText("tick")).toBeInTheDocument();
+    expect(screen.getByTestId("mark")).toBeInTheDocument();
   });
 
-  it("renders its children when the checkbox is indeterminate", () => {
+  it("is decorative, carrying aria-hidden", () => {
     // Arrange & Act
     render(
-      <Checkbox.Root defaultChecked="indeterminate" aria-label="Accept terms">
-        <Checkbox.Indicator>tick</Checkbox.Indicator>
+      <Checkbox.Root aria-label="Accept terms">
+        <Checkbox.Indicator data-testid="mark" />
       </Checkbox.Root>,
     );
 
     // Assert
-    expect(screen.getByText("tick")).toBeInTheDocument();
+    expect(screen.getByTestId("mark")).toHaveAttribute("aria-hidden", "true");
   });
 
-  it("mounts and unmounts in response to toggling", async () => {
+  it("mirrors the checkbox's data-state for CSS to key off", async () => {
     // Arrange
     const user = userEvent.setup();
     render(
       <Checkbox.Root aria-label="Accept terms">
-        <Checkbox.Indicator>tick</Checkbox.Indicator>
+        <Checkbox.Indicator data-testid="mark" />
       </Checkbox.Root>,
     );
-    expect(screen.queryByText("tick")).not.toBeInTheDocument();
+    const mark = screen.getByTestId("mark");
+    expect(mark).toHaveAttribute("data-state", "unchecked");
 
     // Act
     await user.click(screen.getByRole("checkbox", { name: "Accept terms" }));
 
     // Assert
-    expect(screen.getByText("tick")).toBeInTheDocument();
+    expect(mark).toHaveAttribute("data-state", "checked");
   });
 
-  it('carries aria-hidden="true" since it is decorative', () => {
-    // Arrange & Act
-    render(
-      <Checkbox.Root defaultChecked aria-label="Accept terms">
-        <Checkbox.Indicator data-testid="indicator">tick</Checkbox.Indicator>
-      </Checkbox.Root>,
-    );
-
-    // Assert
-    expect(screen.getByTestId("indicator")).toHaveAttribute(
-      "aria-hidden",
-      "true",
-    );
-  });
-
-  it("mirrors the checkbox's data-state on the indicator", () => {
+  it("mirrors the indeterminate data-state", () => {
     // Arrange & Act
     render(
       <Checkbox.Root defaultChecked="indeterminate" aria-label="Accept terms">
-        <Checkbox.Indicator data-testid="indicator">tick</Checkbox.Indicator>
+        <Checkbox.Indicator data-testid="mark" />
       </Checkbox.Root>,
     );
 
     // Assert
-    expect(screen.getByTestId("indicator")).toHaveAttribute(
+    expect(screen.getByTestId("mark")).toHaveAttribute(
       "data-state",
       "indeterminate",
     );
   });
 
-  it("stays in the DOM while unchecked when forceMount is set", () => {
+  it("delegates to the consumer's element (e.g. an svg tick) via asChild", () => {
     // Arrange & Act
     render(
-      <Checkbox.Root aria-label="Accept terms">
-        <Checkbox.Indicator forceMount data-testid="indicator">
-          tick
+      <Checkbox.Root defaultChecked aria-label="Accept terms">
+        <Checkbox.Indicator asChild>
+          <svg data-testid="tick" viewBox="0 0 10 10">
+            <path d="M1 5l3 3 5-7" />
+          </svg>
         </Checkbox.Indicator>
       </Checkbox.Root>,
     );
-    const indicator = screen.getByTestId("indicator");
+    const tick = screen.getByTestId("tick");
 
     // Assert
-    expect(indicator).toBeInTheDocument();
-    expect(indicator).toHaveAttribute("data-state", "unchecked");
+    expect(tick.tagName.toLowerCase()).toBe("svg");
+    expect(tick).toHaveAttribute("aria-hidden", "true");
+    expect(tick).toHaveAttribute("data-state", "checked");
   });
 
   it("throws when rendered outside Checkbox.Root", () => {
@@ -108,9 +85,7 @@ describe("Checkbox.Indicator", () => {
     const error = vi.spyOn(console, "error").mockImplementation(() => {});
 
     // Assert
-    expect(() =>
-      render(<Checkbox.Indicator>tick</Checkbox.Indicator>),
-    ).toThrow();
+    expect(() => render(<Checkbox.Indicator />)).toThrow();
 
     error.mockRestore();
   });