Mock navigation in Storybook 7 with Next.js 13 App Router

[StephenSHorton]

Summary

How do I simulate navigation and capture the new pathname in a component?

I have been made aware of the zero-config nextjs/storybook integration. It appears the next/navigation is 'mocked' and I can manipulate it in my story like so

parameters: {
  nextjs: {
    appDirectory: true,
    navigation: {
      pathname: '/foo',
    },
  },
},

I have tried to use usePathname from next/navigation

const pathname = usePathname()
const currentPage = pathname.split('/').pop()

But I've found out that due to navigation being mocked I can't access changes to the pathname through usePathname. Is there any way I can latch onto the changes in pathname and affect the state of my component to present in my Story?

Additional information

Using Storybook version ^7.6.6

Here's my .storybook > main.ts

import type { StorybookConfig } from '@storybook/nextjs'
import path from 'path'

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
    '@storybook/addon-themes',
    '@storybook/themes',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: { builder: { useSWC: true } },
  },
  docs: {
    autodocs: 'tag',
  },
  typescript: {
    reactDocgen: 'react-docgen',
  },
  webpackFinal: async (config) => {
    if (!config.resolve) return config
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, '../src'),
    }
    return config
  },
}
export default config

Create a reproduction

No response

[2wheeh]

Hi, I'm facing similar situation (#26084). Have you found out any solution for this?

[StephenSHorton]

No, sorry..

[qcatch]

Im using the app router and initially had the same Issue, but I managed to get it working. Heres what I did

export const Default: Story = {
  parameters: {
    nextjs: {
      appDirectory: true,
      navigation: {
        pathname: '/games'
      }
    }
  },
  args: { ... }
};

and in my navigation components (I'm using a use client) and

const pathname = usePathname();
const currentPath = pathname?.slice(1);

now currentPath appears as games in storybook

[StephenSHorton]

Thanks for replying! For context though, I was looking to simulate navigation. Meaning I'd like to click a next.js link and see the path change to another value. (For example, to show off active link styles on a navbar)

If yours does this please let me know.

[johnschult]

@qcatch This was perfect! I am actually using a server component in a story that uses next-intl hooks and this fixed the issue 😄

[kagankan]

I was also struggling with the same issue, but it was resolved with Storybook 8.1.

import type { Preview } from "@storybook/react";
import {
  ReadonlyURLSearchParams,
  getRouter,
  usePathname,
  useSearchParams,
} from "@storybook/nextjs/navigation.mock";
import { useMemo } from "react";
import mockRouter from "next-router-mock";

const preview: Preview = {
  parameters: {
    nextjs: {
      appDirectory: true,
    },
  },
  beforeEach: () => {
    getRouter().push.mockImplementation(
      (...args: Parameters<typeof mockRouter.push>) => mockRouter.push(...args)
    );
    getRouter().replace.mockImplementation(
      (...args: Parameters<typeof mockRouter.replace>) =>
        mockRouter.replace(...args)
    );
    usePathname.mockImplementation(() => mockRouter.pathname);
    useSearchParams.mockImplementation(() => {
      const searchParams = useMemo(
        () =>
          new ReadonlyURLSearchParams(
            new URLSearchParams(mockRouter.query as Record<string, string>)
          ),
        [mockRouter.query]
      );
      return searchParams;
    });
  },
};

export default preview;

[girlwebdeveloper]

thanks. this one works upon initial installation of storybook

[gauravvermatechno]

great this works but i have to refresh then i can see path change effects