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.