Storybook入门：轻松搭建你的组件库

本文将详细介绍如何使用Storybook入门，帮助你独立开发和测试React组件。通过Storybook，你可以专注于组件的外观和行为，并在隔离环境中进行可视化测试。文章将依次介绍Storybook的安装、配置、使用方法，以及如何创建和测试React组件，展示其强大的功能和优势。

Storybook是一个用于构建和测试React组件的工具。它允许你在隔离的环境中开发和测试组件，无需考虑整个应用的复杂性。通过Storybook，你可以专注于组件的外观和行为，而不是整个应用的集成。这对于前端开发者来说是一个非常强大的工具，因为它提供了组件库的可视化和可测试环境。

Storybook支持多种前端框架，包括React、Angular、Vue等。在本文中，我们将专注于如何使用Storybook来开发React组件。

Storybook的作用不仅限于组件库的构建，它还是一个理想的工具，用于展示、测试和文档化组件。以下是使用Storybook的一些主要优势：

• 独立开发：Storybook允许你在一个隔离的环境中开发和测试组件，避免了与整个应用的其他部分相互依赖的问题。
• 可视化测试：Storybook提供了一个界面来测试组件的各种状态，这有助于确保组件在不同条件下都能正常工作。
• 文档化：Storybook不仅仅是开发工具，它也是一个优秀的文档系统，可以用来展示组件的使用方法和参数。
• 交互性：Storybook支持组件的交互式开发，比如模拟用户交互，这有助于发现组件的问题。
• 多平台支持：可以轻松地在不同的平台和环境中使用Storybook，这意味着你可以很容易地将一个组件库移植到不同的应用中。

在开始使用Storybook之前，你需要安装它。以下是安装Storybook到React项目中的步骤：

1. 创建新的React项目（如果还没有创建）：

   npx create-react-app my-storybook-app
   cd my-storybook-app

2. 安装Storybook：

   npx sb init

   这个命令会创建并配置Storybook，同时会安装必要的依赖。

3. 启动Storybook：

   npm run storybook

   这将启动Storybook的开发服务器，并在浏览器中打开Storybook预览页面。

配置Storybook可以根据项目的需求进行调整。以下是如何自定义Storybook的一些常见配置项：

1. 修改main.js文件：

   打开./storybook/main.js文件，你可以找到一些配置项，比如stories和addons：

   module.exports = {
    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: [
      '@storybook/addon-links',
      '@storybook/addon-essentials',
      '@storybook/addon-interactions',
    ],
   };

   这些配置项允许你指定Storybook应该从哪里查找故事文件，以及哪些插件需要启用。

2. 自定义主题：

   你可以在main.js中添加主题配置，例如：

   module.exports = {
    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: [
      '@storybook/addon-links',
      '@storybook/addon-essentials',
      '@storybook/addon-interactions',
    ],
    framework: '@storybook/react',
    core: {
      builder: '@storybook/builder-webpack5',
    },
    features: {
      postcss: true,
    },
    webpackFinal: async (config) => {
      config.module.rules.push({
        test: /\.stories\.jsx?$/,
        use: {
          loader: '@storybook/addon-storysource/loader',
          options: {
            prettierConfig: {
              singleQuote: true,
              trailingComma: 'all',
            },
          },
        },
      });
      return config;
    },
    staticDirs: ['../public'],
   };

   上述配置中添加了webpackFinal选项，用于调整Webpack配置以更好地支持Storybook。

首先，我们编写一个简单的React组件。假设我们创建一个计数器组件，它有一个按钮，点击按钮后可以增加计数器的值。

1. 创建组件文件：

   在src目录下创建一个新的文件Counter.js：

   import React, { useState } from 'react';
   
   const Counter = () => {
    const [count, setCount] = useState(0);
   
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
   };
   
   export default Counter;

2. 创建故事文件：

   在同一目录下，创建一个新的文件Counter.stories.js：

   import React from 'react';
   import { Story, Meta } from '@storybook/react';
   import Counter from './Counter';
   
   export default {
    title: 'Example/Counter',
    component: Counter,
   } as Meta;
   
   const Template: Story = (args) => <Counter {...args} />;
   
   export const Default = Template.bind({});
   Default.args = {};

   上述代码定义了一个故事，Default，用于展示Counter组件。

在Storybook中，你可以添加交互来模拟组件的行为。我们将在计数器组件中添加点击事件来展示交互。

1. 修改故事文件：

   在Counter.stories.js中，我们可以添加一个参数来动态改变计数器的初始值：

   import React from 'react';
   import { Story, Meta } from '@storybook/react';
   import Counter from './Counter';
   
   export default {
    title: 'Example/Counter',
    component: Counter,
   } as Meta;
   
   const Template: Story = (args) => <Counter {...args} />;
   
   export const Default = Template.bind({});
   Default.args = {
    initialCount: 0,
   };
   Default.parameters = {
    controls: { disable: true },
   };
   
   export const WithInitialCount = Template.bind({});
   WithInitialCount.args = {
    initialCount: 10,
   };
   WithInitialCount.storyName = 'With Initial Count';

   这里，我们添加了initialCount参数，并展示了如何通过不同的参数来展示组件的不同状态。

你可以在组件中添加样式，也可以在Storybook中直接为组件添加样式。我们将为计数器组件添加一些基本的样式。

1. 添加样式文件：

   在src目录下创建一个新的文件Counter.css：

   .counter-container {
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
   }
   
   button {
    margin-left: 10px;
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
   }

2. 引入样式文件：

   修改Counter.js文件，引入刚刚创建的CSS文件：

   import React, { useState } from 'react';
   import './Counter.css';
   
   const Counter = () => {
    const [count, setCount] = useState(0);
   
    return (
      <div className="counter-container">
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
   };
   
   export default Counter;

3. 在故事文件中引入样式：

   修改Counter.stories.js以展示带有样式的计数器：

   import React from 'react';
   import { Story, Meta } from '@storybook/react';
   import Counter from './Counter';
   
   export default {
    title: 'Example/Counter',
    component: Counter,
   } as Meta;
   
   const Template: Story = (args) => <Counter {...args} />;
   
   export const Default = Template.bind({});
   Default.args = {};
   Default.parameters = {
    controls: { disable: true },
   };
   
   export const WithInitialCount = Template.bind({});
   WithInitialCount.args = {
    initialCount: 10,
   };
   WithInitialCount.storyName = 'With Initial Count';

测试是保证组件质量的重要步骤。在Storybook中，你可以使用各种测试工具来验证组件的行为。我们将使用Jest和React Testing Library来测试计数器组件。

1. 安装测试依赖：

   如果还没有安装，可以使用以下命令安装测试相关的依赖：

   npm install --save-dev jest @testing-library/react @testing-library/jest-dom

2. 编写测试文件：

   在src目录下创建一个新的文件Counter.test.js：

   import React from 'react';
   import { render, screen, fireEvent } from '@testing-library/react';
   import Counter from './Counter';
   
   test('renders initial count', () => {
    render(<Counter />);
    expect(screen.getByText(/Count: 0/)).toBeInTheDocument();
   });
   
   test('increments count on button click', () => {
    render(<Counter />);
    fireEvent.click(screen.getByText(/Increment/));
    expect(screen.getByText(/Count: 1/)).toBeInTheDocument();
   });

   上述测试中，我们验证了计数器组件是否正确地渲染初始值，并且点击按钮后计数器值是否正确增加。

你可以在Storybook中预览组件，看看它在不同状态下的表现。我们已经在前面的步骤中添加了多个故事来展示计数器组件的不同状态。

1. 打开Storybook：

   在终端中运行以下命令来启动Storybook：

   npm run storybook

   这将打开Storybook的预览页面，你可以在这里看到并测试你的组件。

2. 查看故事：

   在Storybook的界面中，你可以看到之前定义的故事。例如，点击Counter故事，你会看到计数器组件及其不同的状态和交互。

Storybook支持使用参数来动态地改变组件的状态。这使得你可以轻松地展示组件的各种可能状态，而不需要为每个状态写不同的故事。

1. 修改故事文件：

   在Counter.stories.js中，我们可以使用参数来改变计数器的初始值：

   import React from 'react';
   import { Story, Meta } from '@storybook/react';
   import Counter from './Counter';
   
   export default {
    title: 'Example/Counter',
    component: Counter,
   } as Meta;
   
   const Template: Story = (args) => <Counter {...args} />;
   
   export const Default = Template.bind({});
   Default.args = {};
   
   export const WithInitialCount = Template.bind({});
   WithInitialCount.args = {
    initialCount: 10,
   };
   WithInitialCount.storyName = 'With Initial Count';

   在这里，我们使用了args属性来传递参数给组件。你可以在Storybook界面中选择不同的参数值来查看组件的不同状态。

Storybook提供了许多附加功能，比如添加交互、文档生成、测试等。以下是一些重要的附加功能：

1. 使用附加插件：

   Storybook提供了许多插件，例如@storybook/addon-interactions、@storybook/addon-essentials等。你可以在main.js中添加这些插件来启用它们。

2. Document组件：

   Storybook还提供了一个Document组件，用于生成组件的文档。你可以在故事文件中使用<Document>标签来添加文档：

   import React from 'react';
   import { Story, Meta } from '@storybook/react';
   import Counter from './Counter';
   import { withDocs } from '@storybook/addon-docs/react';
   import Readme from './README.md';
   
   export default {
    title: 'Example/Counter',
    component: Counter,
   } as Meta;
   
   const Template = (args) => <Counter {...args} />;
   
   const Story = withDocs(Template);
   export const Default = Story.bind({});
   Default.args = {};
   Default.parameters = {
    docs: {
      page: () => <Readme />,
    },
   };

   上述代码中，withDocs函数用于将文档添加到故事中。

3. 使用参数面板：

   在Storybook中，你可以使用参数面板来动态地改变组件的参数。这使得你可以轻松地测试组件在不同条件下的行为。

通过这些功能，Storybook成为一个强大的工具，用于构建和测试React组件。希望本文能帮助你更好地理解和使用Storybook。