Mocking routes object

Get Help and Help Others
1

Hello everyone,

I’ve been trying to create some stories for one of my components but keeps getting the same error in storybook when trying to create a stories where the routes object is used in the component. I was not able to reproduce the problem by starting a new project from scratch using GitPod. The mocking seems to be done properly in the new project but in mine, I its not working at all but we seems to have the same setup.

Here’s my config, file & story and also my repo in case something else is needed.

import { Link, routes } from "@redwoodjs/router";
import TagDisplay from "../TagDisplay/TagDisplay";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../Card";

interface Recipe {
  id: string;
  name: string;
  description: string;
  family: {
    id: string;
    name: string;
  }
  ingredients: {
    id: string;
    name: string;
    color: string;
  }[]
  tags: {
    id: string;
    name: string;
    color: string;
  }[]
}

interface Props {
  recipe: Recipe;
}

import tomato from '../Recipe/Recipe/tomato.jpeg'

const AllRecipesRecipeDisplay = ({ recipe }: Props) => {

  return (
    <Link
      to={routes.recipe({ id: recipe.id })}
      title={'Show recipe ' + recipe.name + ' detail'}
      className="w-80 h-80"
    >
      <Card className="shadow-md h-fit hover:bg-slate-100">
        <CardHeader className="p-4 pb-0">
          <img
            src={tomato} // TODO: replace with recipe image
            alt={recipe.name}
            className="w-full h-40 object-cover rounded-lg pb-2"
          />
          <CardTitle className="text-xl font-bold">
            {recipe.name}
          </CardTitle>
          <CardDescription className="text-gray-600 line-clamp-4">
            {recipe.description}
          </CardDescription>
        </CardHeader>
        <CardContent className="p-4 pt-0">
          <div className="flex flex-wrap gap-2 pt-2">
            {recipe.tags.map((tag) => <TagDisplay tag={tag} key={tag.id} />)}
            {recipe.ingredients.map((ingredient) => <TagDisplay tag={ingredient} key={ingredient.id} />)}
          </div>
        </CardContent>
      </Card>
    </Link>
  );
};

export default AllRecipesRecipeDisplay;

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

import AllRecipesRecipeDisplay from "./AllRecipesRecipeDisplay";

const meta: Meta<typeof AllRecipesRecipeDisplay> = {
  component: AllRecipesRecipeDisplay,
  tags: ["autodocs"],
  args: {
    recipe: {
      id: "1",
      name: "Tomato and Egg Stir-Fry",
      description: "A quick and simple stir-fry combining fresh tomatoes and scrambled eggs. This classic dish is packed with flavor and comes together in just a few minutes. It's perfect for a light meal or as a side to rice.",
      family: {
        id: "1",
        name: "Deschesnes"
      },
      ingredients: [],
      tags: []
    }
  }
};

export default meta;

type Story = StoryObj<typeof AllRecipesRecipeDisplay>;

export const Primary: Story = {};

import type { StorybookConfig } from 'storybook-framework-redwoodjs-vite'

import { getPaths, importStatementPath } from '@redwoodjs/project-config'

const redwoodProjectPaths = getPaths()

const config: StorybookConfig = {
  framework: 'storybook-framework-redwoodjs-vite',

  stories: [
    `${importStatementPath(
      redwoodProjectPaths.web.src
    )}/**/*.stories.@(js|jsx|ts|tsx|mdx)`,
  ],

  addons: ['@storybook/addon-essentials'],
}

export default config