Как использовать useLocation хук в storybook?

Question

[Alexey]

Подскажите как интегрировать useLocation хук в storybook компонент?

К примеру имеется story:

export default {
    component: Header,
    title: 'Header'
};

export const Default = (args) => <Header {...args} />;

Компонент header использует useLocation:

const usePathname = () => {
        const location = useLocation();
        return location.pathname;
    };

При выполнении кода, возникает ошибка:

TypeError
Cannot read properties of undefined (reading 'location')

Подскажите как зафиксить данную ошибку? И вообще как правильно интегрировать библиотеки в storybook?

Answer 1

[Alexandroppolus]

useLocation работает, если компонент с ним прямо или косвенно находится внутри Router.
Как известно, Router получает в пропсы экземпляр history, кладет его в контекст, а useLocation достает из контекста.
Возможно, в сторибуке ты забыл обернуть всё в Router

Comments

[Alexey]

Спасибо за решение!
Итог:

import React from 'react';
import Header from '../components/header/Header';
import Content from './assets/data.json';
import {createMemoryHistory} from 'history';
import {Router} from 'react-router-dom'

export default {
    component: Header,
    title: 'Header'
};

export const Default = (args) => {
    // useLocation
    const history = createMemoryHistory()
    const route = '/'
    history.push(route)

    return <Router history={history}>
        <Header {...args}/>
    </Router>
};

Default.args = {
    content: Content,
    search: ''
};