在故事书故事中使用需要身份验证的页面（锁定页面）

Question

我有一个 React 页面在用户注销时被锁定。我为该页面创建了一个简单的故事，但它没有显示在仪表板中（使用 yarn storybook 提供）

.storybook/main.js

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], 
  addons: [                                                                     
    {         
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true,                                        
      },
    },          
    "@storybook/addon-links",       
    "@storybook/addon-essentials",                   
    "@storybook/preset-create-react-app",                                                                               
  ],                                                                                                                    
};

LockedPage.stories.tsx

import * as React from "react";
import { Story, Meta } from "@storybook/react/types-6-0";

import {
  Props,
  AirplaneOnBoarding as AirplaneOnBoardingComponent,
} from "../pages/aircarft-onboarding/aircarft-onboarding";         

export default {
  title: "Pages/AirplaneOnboarding",
  component: AirplaneOnBoardingComponent,            
} as Meta;                                                                  
                                                                            
const Template: Story<Props> = (args) => (                                  
  <AirplaneOnBoardingComponent {...args} />                                 
);                                                                          
                                                                            
export const AirplaneOnboarding = Template.bind({});
AirplaneOnboarding.args = {};

The Result

有人可以帮我调试这个问题吗？谢谢！

Answer 1

这真的取决于 AirplaneOnboarding 页面的需要。如果该组件未显示在 Storybook 的侧边栏中，则可能是：

您在 main.js "../src/**/*.stories.@(js|jsx|ts|tsx)" 中定义的 glob 不匹配 LockedPage.stories.tsx。
您的故事文件 + 组件中有问题。如果是这种情况，您会在打开开发工具时看到一些错误日志。

总而言之，如果您要添加需要某些检查（例如身份验证）的页面，您需要执行以下选项之一：

让 Storybook 足够智能以理解这些检查。这意味着您需要添加 decorators 来提供此类功能。您可以创建一个装饰器来包装组件并设置正确的步骤来设置身份验证。例如，如果您在使用 Redux 的状态中设置标志，则可以创建一个装饰器来注入该标志已设置为 true 的状态。
重组您的页面组件以使用容器模式，其中身份验证检查和重定向将在容器中完成，而展示组件将是纯粹的。这种场景，在Storybook中使用真的很简单
模拟你的依赖。您可以使用 MSW to mock the http requests, making them return what you want.. or you could use Sinon 之类的东西来完全模拟您想要的任何导入，类似于开玩笑模拟依赖项的方式。

请记住，Storybook 的行为与 React 类似。默认情况下，您的 App.jsx 非常“愚蠢”。您需要添加装饰器（提供程序）以使其对您的用例足够智能。在 Storybook 中也是一样。

在故事书故事中使用需要身份验证的页面（锁定页面）

Use pages that need authentication (locked pages) in storybook stories

reactjs

storybook