Mocking a utility function that uses next/header cookie

[alasdair009]

Summary

I am running a Next Multi-tenant site that uses cookies to store the context of the currently viewed tenant so that any shared server components can call the following to style themselves or change their behaviour as applicable:

// getProduct.ts
import {cookies} from 'next/headers'

export async function getProduct() {
    const cookieStore = await cookies();
    const productCookie = cookieStore.get('x-tenant-id');
    return productCookie?.value || 'default';
}

This works fine inside the Next app, but Storybook cannot use next/headers in stories so I created a mock implementation...

// getProduct.mock.ts
import { fn } from '@storybook/test';
import * as actual from './getProduct';

export * from "./getProduct";
export const getProduct = fn(actual.getProduct).mockName("getProduct").mockImplementation(async () => {
    return "<SOME STRING>"; // Placeholder return value but will eventually grab the value of the cookie in vanilla JS I hope
});

I then updated the main.ts file inside .storybook to:

  viteFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve?.alias,
        "@/lib/getProduct": path.resolve(__dirname, "../src/lib/getProduct.mock.ts"),
      };
    }
    return config;
  },

However, when the component in question loads, it still appears to run the original function and return default.

I even tried mocking inline on the story with...

export const Default: StoryObj<typeof Button> = {
    async beforeEach() {
        getProduct.mockImplementation(async () => {
            return "<SOME STRING>"
        })
    }
}

Am I missing something here?

Additional information

Storybook: 8.6.12

//main.ts
import type { StorybookConfig } from "@storybook/experimental-nextjs-vite";
import path from "path";

const config: StorybookConfig = {
  stories: [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@chromatic-com/storybook",
    "@storybook/experimental-addon-test"
  ],
  framework: {
    "name": "@storybook/experimental-nextjs-vite",
    "options": {}
  },
  staticDirs: [
    "../public"
  ],
  viteFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve?.alias,
        "@/lib/getProduct": path.resolve(__dirname, "../src/lib/getProduct.mock.ts"),
      };
    }
    return config;
  },
  features: {
    experimentalRSC: true,
  }
};
export default config;

Create a reproduction

No response