Wrap next/navigation mock with fn.

[hayato-osh]

Is your feature request related to a problem? Please describe.

LT;DR

I would like to see support for spying next/navigation and next/router in the play function.

Problem

next/navigation and next/router are mocked up according to the following documentation.

https://www.npmjs.com/package/@storybook/nextjs/v/0.0.0-pr-24604-sha-a206c3eb#default-navigation-context

However, this mock does not allow spying with the play function.

As a workaround, each function can be tested by wrapping it with fn as shown below:

const defaultNavigationContext = {
  push: fn((...args: any[]) => {
    action('nextNavigation.push')(...args);
  }),
  replace: fn((...args: any[]) => {
    action('nextNavigation.replace')(...args);
  }),
  forward: fn((...args: any[]) => {
    action('nextNavigation.forward')(...args);
  }),
  back: fn((...args: any[]) => {
    action('nextNavigation.back')(...args);
  }),
  prefetch: fn((...args: any[]) => {
    action('nextNavigation.prefetch')(...args);
  }),
  refresh: fn(() => {
    action('nextNavigation.refresh')();
  }),
};

const preview: Preview = {
  parameters: {
    nextjs: {
      appDirectory: true,
      navigation: defaultNavigationContext,
    },
  },
};

Describe the solution you'd like

I believe Storybook is currently focusing on testing functionality, so I would like to see this supported by default.

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

[valentinpalkovic]

@yannbf, does your work regarding improved support of Next.js for portable stories fix this?

[yannbf]

Not really, but OP's workaround would work in portable stories

[kasperpeulen]

@hayato-osh Working on a proposal where you can do:

const defaultNavigationContext = {
  push: fn().mockName('nextNavigation.push'),
};

And it will be logged in the action panel automatically.

[yannbf]

I think OP also wants to be able to access such mocks so they can assert them being called in a play function. Is that right @hayato-osh?

[hayato-osh]

@kasperpeulen @yannbf
Yes, I want to be able to test if next/navigaion is called in the play function as follows:

await expect(parameters.nextjs.navigation.push).toHaveBeenCalled();

[kasperpeulen]

export const nextjsNavigation = {
  push: fn((...args: any[]) => {
    action('nextNavigation.push')(...args);
  }),
  replace: fn((...args: any[]) => {
    action('nextNavigation.replace')(...args);
  }),
  forward: fn((...args: any[]) => {
    action('nextNavigation.forward')(...args);
  }),
  back: fn((...args: any[]) => {
    action('nextNavigation.back')(...args);
  }),
  prefetch: fn((...args: any[]) => {
    action('nextNavigation.prefetch')(...args);
  }),
  refresh: fn(() => {
    action('nextNavigation.refresh')();
  }),
};

const preview: Preview = {
  parameters: {
    nextjs: {
      appDirectory: true,
      navigation: nextjsNavigation,
    },
  },
};

and then use it like:

await expect(nextjsNavigation.push).toHaveBeenCalled();

[hayato-osh]

@kasperpeulen
Yes, this is currently something users have to set up themselves inpreview.tsx, etc. , but we would like it to be provided by default in Storybook.