StoryBook React hook

Viewed 3980

So I used useLocation hook in my code and I am new to storybook I couldn't figure out a way to initialize that hook in my code:

let location = useLocation();

const parsedLocation = new URLSearchParams(location.search)
const query = parsedLocation.get('query')
const {articles, status} = useSearch(query, 50)

IN STORYBOOK

const Template = (args) => <Page {...args} />;

export const Primary = Template.bind({});
 Primary.args = {
   location: useLocation()
};

// Its showing me error that Cannot read property 'location' of undefined

1 Answers

Move useLocation(); to container component where you collect all data and handle events. Pass query as a props to children component.

In Storybook use mocked data to build this component. Storybook is more for developing UI part of components. To test using useLocation() hook you can use unit tests.

In case you need to mock some URL location for your component, consider using MemoryRouter https://reactrouter.com/web/api/MemoryRouter

Related