Storybook

[magdalenakierat]

Hallo zusammen, ich bräuchte Hilfe von unseren Storybook-Profis! Ich habe für meine Components jeweils entsprechende Stories angelegt und bekomme direkt Fehlermeldungen bei „Card“ und „CountDownTimer“. „Bookmark“ und „CategoryList“ werden mir zwar angezeigt, ich bekomme aber direkt eine Fehlermeldung, wenn ich ein onClick ausführe.
Meine Fragen:

1. Kann ich in Stories das onClick irgendwie deaktivieren oder gibt es einen anderen Weg das Problem zu umgehen?
2. Wie kann ich Beispieldaten nutzen? Ich habe es in der Card.stories.js versucht, der Fehler scheint aber woanders zu liegen.

Hier ist der Link zum entsprechenden Branch: https://github.com/magdalenakierat/capstone-project/compare/stories?expand=1
Vielen Dank für eure Hilfe 😊

[PReichetanz]

1. Du könntest ein console.log() für diejenige prop übergeben, hinter der eine Funktion steht: onBookmark={() => console.log("Bookmark was clicked.")}
2. Sieht schon gut aus, aber es fehlen noch die props id, title und pathname, damit könnte der Fehler zusammenhängen.

Wichtig wäre hier zu wissen, wie die Fehlermeldungen genau lauten.

[magdalenakierat]

Danke, @PReichetanz, das war sehr hilfreich!
Ich konnte alle Stories fixen, bis auf "Card" (Branch ist aktualisiert). Ich habe die Props ergänzt, wie vorgeschlagen, aber der Fehler liegt wohl woanders. Die Fehlermeldung lautet: useHref() may be used only in the context of a component.
Hast du eine Idee, wie ich den Link deaktivieren kann? Danke nochmal 🙏

[PReichetanz]

You need to add the MemoryRouter to decorators inside of the .storybook/preview.js file:

import {MemoryRouter} from 'react-router-dom';

export const parameters = {
...
}

export const decorators = [
  Story => (
    <MemoryRouter>
      <GlobalStyles />
      <Story />
    </MemoryRouter>
  ),
];

[magdalenakierat]

Perfekt! So klappt es! Danke 😊