Mocking route id in storybook

Get Help and Help Others
1

Hi All,

Quick question.

I have generated a page that takes in a URL Param of id. Eg:

<Route path="/playlist/{id:Int}" page={PlaylistPage} name="playlist" />

My component looks like this

import { Link, routes } from '@redwoodjs/router'
import { MetaTags } from '@redwoodjs/web'

type Props = {
  id: number
}

const PlaylistPage: React.FC<Props> = ({ id }) => {
  return (
    <>
      <MetaTags title="Playlist" description="Playlist page" />

      <h1>PlaylistPage = {id}</h1>
      <p>
        Find me in <code>./web/src/pages/PlaylistPage/PlaylistPage.tsx</code>
      </p>
      <p>
        My default route is named <code>playlist</code>, link to me with `
        <Link to={routes.playlist()}>Playlist</Link>`
      </p>
    </>
  )
}

export default PlaylistPage

Over in storybook I am getting an error…

Missing parameter ‘id’ for route ‘/playlist/{id:Int}’ when generating a navigation URL.

How do I mock a URL param for storybook?

Thanks

2

Hi @shansmith01
We just today merged some code to make this much easier.

Have a look at the changes introduced by that PR and see if that helps you figure out what you need to do

3

You are most likely getting this error because you didn’t pass the id to routes.playlist()

Try
<Link to={routes.playlist({ id })}>Playlist</Link>