如何使用Storybook建立一個有外部鉤子的螢屏？ -有解無憂

我有一個螢屏上有這樣的代碼：

基本上，我有useNavigation，這是來自React導航，然后useAuth我的自定義useContext掛鉤。我的螢屏需要這兩個鉤子才能正常作業。

const UserBasicDetailsScreen。React.FC<UserDetailsScreenProps> = ({}) => /span>{
    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>/span>
        )
    }

    return (
        <Layout>)
            <Flex direction="column">/span>
                {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_name和user.user_handle

。

如果user物件有user.display_name和user.user_handle

。

我希望在Storybook中呈現這兩個條件。

因此，這是我所嘗試的：

const mockValue = {
    user: {
        display_name: 'Ken choong',
        user_handle: 'upupkenchoong',
        //...其他東西。
    },
}

const mockNoUser = {
    user: {
        //其他東西在這里沒有顯示名稱和手柄。
    },
}

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

我所做的是，模擬2個物件mockValue和mockNoUser，然后把它提供給AuthContextProvider，用于2個不同的故事。

現在的問題：

現在的問題是，當我打開default details或no details故事時，我得到了空白的螢屏。在視覺上沒有任何東西。

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

我的問題：

如何在Storybook中為一個組件使用自定義鉤子，如useAuth？
對于我上面的UserBasicDetailsScreen，渲染故事的正確方法是什么？

如果可能的話，請為我提供一個例子，因為我對此毫無頭緒。預先感謝

uj5u.com熱心網友回復：

如何在Storybook中為一個組件使用一個類似useAuth的自定義鉤子？

你是否嘗試過這樣的方法？

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

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/326350.html

標籤：

上一篇：reactnativeDateTimePicker設定初始狀態為String

下一篇：Visualstudio代碼。"matplotlib"沒有被訪問Pylance