Storybook：React组件开发好帮手

一、Storybook介绍

Storybook是一款用于构建、测试和展示UI组件的工具，它提供了丰富的功能，可以帮助开发者快速构建和测试组件，并编写文档，极大提高UI组件开发效率。Storybook是一款开源工具，使用简单，功能强大，是UI组件开发的必备工具。

二、Storybook的安装和使用

1. 安装Storybook

npm install -g @storybook/cli

2. 初始化Storybook项目

cd your-project-directory
npx sb init

3. 运行Storybook

npm start

三、使用Storybook构建UI组件

Storybook提供了一种非常方便的组件开发方式，它可以帮助开发者快速构建和测试组件。

1. 新建一个组件

mkdir src/components/Button

// src/components/Button/Button.js
import React from "react";

const Button = ({ children, onClick }) => {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

2. 在Storybook中显示组件

// .storybook/main.js
module.exports = {
  stories: ["../src/components/**/*.stories.js"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
};

// src/components/Button/Button.stories.js
import React from "react";
import Button from "./Button";

export default {
  title: "Button",
  component: Button,
};

export const Primary = () => <Button>Primary</Button>;
export const Secondary = () => <Button>Secondary</Button>;

3. 运行Storybook并查看组件

npm start

四、Storybook的测试

Storybook还提供了一个强大的组件测试功能，可以帮助开发者快速测试组件。

1. 安装测试框架

npm install --save-dev @storybook/testing-library

2. 编写测试代码

// src/components/Button/Button.test.js
import React from "react";
import { render, screen } from "@storybook/testing-library";
import Button from "./Button";

describe("Button", () => {
  it("should render correctly", () => {
    render