Merge pull request #76 from storybookjs/copilot/fix-cachelife-export-error

Add cacheLife and cacheTag mocks to next/cache

Author: valentinpalkovic

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
-.env
+.env
+package-lock.json

example/.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+package-lock.json
 /.pnp
 .pnp.js
 .yarn/install-state.gz

example/src/app/components/Cache/Cache.stories.tsx

@@ -0,0 +1,51 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { cacheLife, cacheTag } from "@storybook/nextjs-vite/cache.mock";
+import { expect } from "storybook/test";
+import CacheComponent from "./Cache";
+
+export default {
+  component: CacheComponent,
+  parameters: {
+    layout: "centered",
+  },
+} as Meta<typeof CacheComponent>;
+
+type Story = StoryObj<typeof CacheComponent>;
+
+export const Default: Story = {
+  args: {
+    profile: "default",
+    tags: ["my-tag"],
+  },
+  play: async () => {
+    await expect(cacheLife).toHaveBeenCalledWith("default");
+    await expect(cacheTag).toHaveBeenCalledWith("my-tag");
+  },
+};
+
+export const WithDaysProfile: Story = {
+  args: {
+    profile: "days",
+    tags: ["posts", "user-posts"],
+  },
+  play: async () => {
+    await expect(cacheLife).toHaveBeenCalledWith("days");
+    await expect(cacheTag).toHaveBeenCalledWith("posts");
+    await expect(cacheTag).toHaveBeenCalledWith("user-posts");
+  },
+};
+
+export const WithWeeksProfile: Story = {
+  args: {
+    profile: "weeks",
+    tags: ["static-content"],
+  },
+  play: async () => {
+    await expect(cacheLife).toHaveBeenCalledWith("weeks");
+    await expect(cacheTag).toHaveBeenCalledWith("static-content");
+  },
+};

example/src/app/components/Cache/Cache.tsx

@@ -0,0 +1,38 @@
+import { cacheLife, cacheTag } from "next/cache";
+
+interface CacheComponentProps {
+  profile?:
+    | "default"
+    | "seconds"
+    | "minutes"
+    | "hours"
+    | "days"
+    | "weeks"
+    | "max";
+  tags?: string[];
+}
+
+export default function CacheComponent({
+  profile = "default",
+  tags = ["my-tag"],
+}: CacheComponentProps) {
+  // Apply cache life profile
+  cacheLife(profile);
+
+  // Apply cache tags
+  for (const tag of tags) {
+    cacheTag(tag);
+  }
+
+  return (
+    <div>
+      <h3>Cache Component</h3>
+      <p>
+        <strong>Cache Life Profile:</strong> {profile}
+      </p>
+      <p>
+        <strong>Cache Tags:</strong> {tags.join(", ")}
+      </p>
+    </div>
+  );
+}

src/plugins/next-mocks/alias/cache/index.ts

@@ -23,13 +23,29 @@ const unstable_noStore: Mock<Procedure> = fn().mockName(
 );
 const refresh: Mock<Procedure> = fn().mockName("next/cache::refresh");
 
+// mock utilities/overrides (as of Next v15.0.0)
+const cacheLife: Mock<Procedure> = fn().mockName("next/cache::cacheLife");
+const cacheTag: Mock<Procedure> = fn().mockName("next/cache::cacheTag");
+
+// deprecated wrappers (as of Next v16.0.0)
+const unstable_cacheLife: Mock<Procedure> = fn()
+  .mockName("next/cache::unstable_cacheLife")
+  .mockImplementation((...args) => cacheLife(...args));
+const unstable_cacheTag: Mock<Procedure> = fn()
+  .mockName("next/cache::unstable_cacheTag")
+  .mockImplementation((...args) => cacheTag(...args));
+
 const cacheExports = {
   unstable_cache,
   revalidateTag,
   revalidatePath,
   updateTag,
   refresh,
   unstable_noStore,
+  cacheLife,
+  cacheTag,
+  unstable_cacheLife,
+  unstable_cacheTag,
 };
 
 export default cacheExports;
@@ -40,4 +56,8 @@ export {
   unstable_noStore,
   refresh,
   updateTag,
+  cacheLife,
+  cacheTag,
+  unstable_cacheLife,
+  unstable_cacheTag,
 };