From 3c3bf25b184f2a4e01191e98cf90268a49bdcc5b Mon Sep 17 00:00:00 2001
From: Fiona Runge <github@runjak.codes>
Date: Mon, 26 May 2025 17:27:26 +0200
Subject: [PATCH] Fix instanceof implementation for mocked Dates (#616)

By adding Symbol.hasInstance to MockDate we allow for instanceof to work with mocked Dates.
When the global Date object is replaced with a mocked one unmocked Dates
are also instances of MockedDate and vice versa.
---
 .changeset/warm-ladybugs-admire.md       |  5 +++++
 e2e/decorators/src/mock-date.stories.tsx | 18 ++++++++++++++++++
 e2e/decorators/tests/mock-date.spec.ts   |  7 +++++++
 e2e/decorators/tests/params.spec.ts      | 11 +++++++++++
 packages/ladle/lib/app/src/mock-date.ts  |  4 ++++
 5 files changed, 45 insertions(+)
 create mode 100644 .changeset/warm-ladybugs-admire.md

diff --git a/.changeset/warm-ladybugs-admire.md b/.changeset/warm-ladybugs-admire.md
new file mode 100644
index 00000000..81ceb14b
--- /dev/null
+++ b/.changeset/warm-ladybugs-admire.md
@@ -0,0 +1,5 @@
+---
+"@ladle/react": patch
+---
+
+Fix instanceof implementation for mocked Dates
diff --git a/e2e/decorators/src/mock-date.stories.tsx b/e2e/decorators/src/mock-date.stories.tsx
index 334ae2b8..2b0af271 100644
--- a/e2e/decorators/src/mock-date.stories.tsx
+++ b/e2e/decorators/src/mock-date.stories.tsx
@@ -31,3 +31,21 @@ export const Inactive: Story = () => {
     </h1>
   );
 };
+
+export const Instanceof: Story = () => {
+  const mockDate = new Date();
+  const realDate = new Date(1234);
+
+  return (
+    <dl>
+      <dt>mockDate instanceof Date:</dt>
+      <dd data-testid="mockDate">{mockDate instanceof Date ? "yes" : "no"}</dd>
+      <dt>realDate instanceof Date:</dt>
+      <dd data-testid="realDate">{realDate instanceof Date ? "yes" : "no"}</dd>
+    </dl>
+  );
+};
+
+Instanceof.meta = {
+  mockDate: "1995-12-17T03:24:00",
+};
diff --git a/e2e/decorators/tests/mock-date.spec.ts b/e2e/decorators/tests/mock-date.spec.ts
index 9c091997..6ea705b1 100644
--- a/e2e/decorators/tests/mock-date.spec.ts
+++ b/e2e/decorators/tests/mock-date.spec.ts
@@ -25,3 +25,10 @@ test("the date is current", async ({ page }) => {
     }),
   );
 });
+
+test("MockDate works with instanceof", async ({ page }) => {
+  await page.goto("/?story=mock-date--instanceof");
+
+  await expect(page.locator('[data-testid="mockDate"]')).toHaveText("yes");
+  await expect(page.locator('[data-testid="realDate"]')).toHaveText("yes");
+});
diff --git a/e2e/decorators/tests/params.spec.ts b/e2e/decorators/tests/params.spec.ts
index e335645b..4f8fa52e 100644
--- a/e2e/decorators/tests/params.spec.ts
+++ b/e2e/decorators/tests/params.spec.ts
@@ -69,6 +69,17 @@ test("meta.json is correctly using defaults and overrides", async ({
           name: "Inactive",
           namedExport: "Inactive",
         },
+        "mock-date--instanceof": {
+          filePath: "src/mock-date.stories.tsx",
+          levels: ["Mock date"],
+          locEnd: 47,
+          locStart: 35,
+          meta: {
+            mockDate: "1995-12-17T03:24:00",
+          },
+          name: "Instanceof",
+          namedExport: "Instanceof",
+        },
         "root--examples--first": {
           filePath: "src/params.stories.tsx",
           levels: ["Root", "Examples"],
diff --git a/packages/ladle/lib/app/src/mock-date.ts b/packages/ladle/lib/app/src/mock-date.ts
index 48c3fac5..66656d3b 100644
--- a/packages/ladle/lib/app/src/mock-date.ts
+++ b/packages/ladle/lib/app/src/mock-date.ts
@@ -56,6 +56,10 @@ const MockDate = class Date extends RealDate {
 
     return date;
   }
+
+  static [Symbol.hasInstance](instance: unknown): boolean {
+    return instance instanceof RealDate;
+  }
 };
 
 MockDate.UTC = RealDate.UTC;