如何使用 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_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
呈现故事的正确方法是什么?
如果可能,请给我一个例子,因为我对此一无所知。提前致谢
【问题讨论】:
【参考方案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)从外部项目导入组件?
Tailwind css 类未在 Storybook 构建中显示
Storybook Angular:如何使用导入的自定义库中的模型/接口?