How to mock route in Storybook?

Get Help and Help Others
1

I created a component that uses NavLink so that when that page is active, it’ll show the activeClassNames list of classes. I want to be able to see this in a Storybook story for this component.

But I…can’t figure out how to do that? I’ve searched around and tried a few different things (like wrapping the story in a decorator with the Router or giving it a parameter with mockCurrentPath, but the first stopped my story from rendering at all and the second let it render but made no difference, no active classes showed). Other suggestions I’ve found all wanted imports from either the Redwood router or testing modules that didn’t exist.

I am admittedly a bit new with Storybook so maybe there’s a way of doing this that I just don’t know about. But I’d really like to be able to see what an active link looks like in a story vs the not-active ones. How would you do this?

Adding the basics of the component below. I’m on Redwood v8.4.4 (not sure the Storybook version as it’s not listed in any of the package.json files, but should be whatever came with that Redwood version). Can anyone help me figure out how to do this please?

The component:

import { NavLink, routes } from '@redwoodjs/router'

const ProfileNavigation = () => {
  return (
    <nav className="flex gap-4">
      <NavLink
        className="text-3xl font-bold uppercase tracking-tighter text-blue"
        activeClassName="text-3xl font-bold uppercase tracking-tighter text-yellow"
        to={routes.userLinks()}
      >
        Links Shared
      </NavLink>
      <NavLink
        className="text-3xl font-bold uppercase tracking-tighter text-blue"
        activeClassName="text-3xl font-bold uppercase tracking-tighter text-yellow"
        to={routes.userComments()}
      >
        Comments
      </NavLink>
    </nav>
  )
}

export default ProfileNavigation

The stories file for that component:

import type { Meta, StoryObj } from '@storybook/react'

import ProfileNavigation from './ProfileNavigation'

const meta: Meta<typeof ProfileNavigation> = {
  component: ProfileNavigation,
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <div className="relative bg-black p-5">
        <Story />
      </div>
    ),
  ],
}

export default meta

type Story = StoryObj<typeof ProfileNavigation>

export const Primary: Story = {}