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

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 的侧边栏中，可能是：

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

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

• 让 Storybook 足够聪明，可以理解这些检查。这意味着您需要添加提供此类功能的decorators。您可以创建一个装饰器来包装组件并设置正确的步骤来设置身份验证。例如，如果你在 Redux 的状态中设置一个标志，你可以创建一个装饰器来注入该标志设置为 true 的状态。
• 重组您的页面组件以使用容器模式，其中身份验证检查和重定向将在容器中完成，并且呈现组件将是纯的。在这种情况下，在 Storybook 中使用它非常简单。
• 模拟您的依赖项。您可以使用 MSW 之类的东西来模拟 http 请求，使它们返回您想要的内容。或者您可以使用 Sinon 来完全模拟您想要的任何导入，类似于 jest 模拟依赖项的方式。

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