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

Question

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

基本上，我有 useNavigation 来自 React 导航，然后是 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

然后我想在这 2 个条件下使用 Storybook 记录此屏幕：

如果 user 对象没有 user.display_name 和 user.user_handle
如果 user 对象具有 user.display_name 和 user.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 个对象 mockValue 和 mockNoUser，然后将其提供给 AuthContextProvider 用于 2 个不同的故事。

现在的问题：

现在的问题是，每当我打开 default details 或 no details 故事时，我都会出现黑屏。视觉上不要有任何东西。

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

我的问题：

如何为 Storybook 中的组件使用像 useAuth 这样的自定义钩子？
为我上面的 UserBasicDetailsScreen 呈现故事的正确方法是什么？

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

Answer 1

How to use a custom hook-like useAuth for a component in Storybook?

你试过这样的事情吗？

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

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

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

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

How to build a screen that having external hook using Storybook?

react-native

expo

storybook