如何在Storybook中使用自定义useAuth Hook并正确渲染依赖外部Hook的UserBasicDetailsScreen组件？

首先，你的组件空白主要有两个核心原因：

• 缺少React Navigation的上下文支持：组件里用了useNavigation，但Storybook环境默认没有提供导航上下文，导致Hook运行出错，组件无法正常渲染。
• Mock的user对象不符合组件的判断逻辑：原组件判断是否显示表单的条件是user.display_name === null && user.user_handle === null，但你写的mockNoUser里这两个字段是不存在的，不是null，所以组件的判断逻辑没触发预期的渲染。

下面是具体的修复方案和完整示例：

步骤1：为Storybook添加React Navigation上下文 #

我们可以用NavigationContainer（来自@react-navigation/native）包裹组件，给useNavigation提供必要的上下文。如果不需要真实的导航功能，传入空配置即可。

步骤2：修正Mock数据，匹配组件判断逻辑 #

• 对于「无详情」场景：user对象需要存在，且display_name和user_handle明确设为null
• 对于「有详情」场景：保持你原来的mock数据即可

步骤3：处理导航跳转逻辑（可选） #

组件里有if (!user) navigation.navigate('Login')的逻辑，在Storybook里我们可以确保mock的user始终存在，或者模拟navigate方法避免潜在报错。

完整的Story代码示例 #

import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { NavigationContainer } from '@react-navigation/native';
import UserBasicDetailsScreen from './UserBasicDetailsScreen';
import { AuthContextProvider } from '../path-to-your-auth-context'; // 替换成你的AuthContext实际路径

// 有详情的用户mock
const mockUserWithDetails = {
  user: {
    display_name: 'Ken choong',
    user_handle: 'upupkenchoong',
    // 补充其他必要的用户属性，比如id等，根据你的useAuth返回结构调整
  },
};

// 无详情的用户mock（display_name和user_handle为null）
const mockUserWithoutDetails = {
  user: {
    display_name: null,
    user_handle: null,
    // 补充其他必要的用户属性
  },
};

storiesOf('UserBasicDetailsScreen', module)
  // 添加装饰器，为所有story提供导航上下文
  .addDecorator((Story) => (
    <NavigationContainer>
      <Story />
    </NavigationContainer>
  ))
  .add('已填写用户详情', () => (
    <AuthContextProvider value={mockUserWithDetails}>
      <UserBasicDetailsScreen />
    </AuthContextProvider>
  ))
  .add('未填写用户详情', () => (
    <AuthContextProvider value={mockUserWithoutDetails}>
      <UserBasicDetailsScreen />
    </AuthContextProvider>
  ));

额外优化：模拟useNavigation（可选） #

如果你不想引入完整的NavigationContainer，也可以用jest.mock来模拟useNavigation Hook，在Storybook的preview.js或者当前story文件里添加：

import { useNavigation } from '@react-navigation/native';

// 模拟useNavigation，返回一个空的导航对象
jest.mock('@react-navigation/native', () => ({
  ...jest.requireActual('@react-navigation/native'),
  useNavigation: () => ({
    navigate: jest.fn(), // 模拟navigate方法，避免跳转报错
    // 按需添加其他你需要的导航方法，比如goBack等
  }),
}));

这样处理后，你的两个Story应该就能正常渲染对应的场景了：

• 「已填写用户详情」会显示UserBasicDetailsDisplay组件
• 「未填写用户详情」会显示UserBasicDetails表单组件

内容的提问来源于stack exchange，提问作者ken