I have a screen with this code:

Basically, I have useNavigation which is from React navigation, then useAuth my custom useContext hooks. My Screen needs these 2 hooks to function properly.

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

Then I want to document this Screen using Storybook for this 2 conditions:

• If user object dont have user.display_name and user.user_handle
• If user object having user.display_name and user.user_handle

I want this 2 condition rendered in Storybook.

Therefore, this is what I tried:

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>
    ))

What I do is, mock the 2 object mockValue and mockNoUser then supply it into AuthContextProvider for 2 different stories.

Problem now:

The problem now is, when ever I open default details or no details story, I get blank screen. Dont have anything in visual.

Therefore I dont know what is causing this.

My Question:

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

2. What is the correct way to render the stories for my UserBasicDetailsScreen above?

Please provide me an example if possible, cause I have no clue on this. Thanks in advance

CodePudding user response：

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

Did you try something like this?

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

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

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