如何使用 Storybook 构建具有外部挂钩的屏幕?

Posted

技术标签:

【中文标题】如何使用 Storybook 构建具有外部挂钩的屏幕?【英文标题】:How to build a screen that having external hook using Storybook? 【发布时间】:2021-11-13 13:10:37 【问题描述】:

我有一个带有此代码的屏幕:

基本上,我有来自 React 导航的 useNavigation,然后是 useAuth 我的自定义 useContext 钩子。我的屏幕需要这 2 个挂钩才能正常工作。

const UserBasicDetailsScreen: React.FC<UserDetailsScreenProps> = () => 
    const navigation = useNavigation()
    const  user  = useAuth()

    const [isShowForm, setIsShowForm] = useState(false)

    if (!user) navigation.navigate('Login')

    if (
        user !== null &&
        user.display_name === null &&
        user.user_handle === null
    ) 
        return (
            <Layout>
                <UserBasicDetails />
            </Layout>
        )
    

    return (
        <Layout>
            <Flex direction="column">
                user !== null &&
                    user.display_name !== null &&
                    user.user_handle !== null && (
                        <UserBasicDetailsDisplay
                            displayName=user.display_name
                            userHandle=user.user_handle
                            setIsShowForm=setIsShowForm
                        />
                    )

                isShowForm && <UserBasicDetails />
            </Flex>
        </Layout>
    )


export default UserBasicDetailsScreen

然后我想使用 Storybook 针对这 2 个条件记录此屏幕:

如果user 对象没有user.display_nameuser.user_handle 如果user 对象具有user.display_nameuser.user_handle

我希望在 Storybook 中呈现这 2 个条件。

因此,这是我尝试过的:

const mockValue = 
    user: 
        display_name: 'Ken choong',
        user_handle: 'upupkenchoong',
        // ... other stuff
    ,


const mockNoUser = 
    user: 
        //other stuff here without display name and handle
    ,


storiesOf('UserBasicDetailsScreen', module)
    .add('default details', () => (
        <AuthContextProvider value=mockValue>
            <UserBasicDetailsScreen />
        </AuthContextProvider>
    ))
    .add('no details', () => (
        <AuthContextProvider value=mockNoUser>
            <UserBasicDetailsScreen />
        </AuthContextProvider>
    ))

我所做的是,模拟 2 个对象 mockValuemockNoUser 然后将其提供给 AuthContextProvider 用于 2 个不同的故事。

现在的问题:

现在的问题是,当我打开 default detailsno details 故事时,我会出现空白屏幕。视觉上没有任何东西。

所以我不知道是什么原因造成的。

我的问题:

    如何为 Storybook 中的组件使用像 useAuth 这样的自定义钩子?

    为我上面的UserBasicDetailsScreen 呈现故事的正确方法是什么?

如果可能,请给我一个例子,因为我对此一无所知。提前致谢

【问题讨论】:

【参考方案1】:

如何为 Storybook 中的组件使用自定义的类似钩子的 useAuth?

你尝试过这样的事情吗?

const UserBasicDetailsDefault = () => 
  const  user  = useAuth()

  return (
        <AuthContextProvider value=user>
            <UserBasicDetailsScreen />
        </AuthContextProvider>
    )


storiesOf('UserBasicDetailsScreen', module).add('default details', () => (
    <UserBasicDetailsDefault />
))

【讨论】:

哦,天哪,非常感谢这个??

以上是关于如何使用 Storybook 构建具有外部挂钩的屏幕?的主要内容,如果未能解决你的问题,请参考以下文章

Storybook - 如何使用样式组件(React + TS)从外部项目导入组件?

如何在 Storybook 中添加样式道具作为控件?

Tailwind css 类未在 Storybook 构建中显示

Storybook Angular:如何使用导入的自定义库中的模型/接口?

Storybook 和 AntDesign 组件 - 如何使用 CRA 和 Typescript 进行设置?

构建 Angular 库后无法将 SCSS 与 Storybook 一起使用