当然,你可以使用Vue、Angular和其他框架,但为了简单起见,我们将使用React。 1. 使用 Next.js 创建 React APP 在我们开始Storybook的冒险之前,我们首先需要创建一个正在运行的Next.js应用程序,以便我们可以在其中安装Storybook。 如果你还没有一个React应用来添加Storybook,你可以先通过初始化Next.js应用来创建一个。在...
In storybook we use a syntax called CSF that looks like this: importtype{Meta,StoryObj}from'@storybook/react';import{MyButton}from'./Button';constmeta={component:MyButton,}satisfiesMeta<typeofMyButton>;exportdefaultmeta;typeStory=StoryObj<typeofmeta>;exportconstBasic:Story={args:{text:'Hello ...
Storybook React renderer. Latest version: 8.5.5, last published: 17 hours ago. Start using @storybook/react in your project by running `npm i @storybook/react`. There are 1523 other projects in the npm registry using @storybook/react.
importReactfrom'react';import{ render, screen }from"@testing-library/react";importButtonfrom".";describe("Button组件",() =>{it("默认Button",() =>{render(<Button>查询</Button>);// 渲染一个名为查询的按钮constelement = screen.getByText("查询");expect(element).toBeInTheDocument();// 判...
Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation. —— Storybook 近两年,WEB团队的React项目一直在使用开源工具Storybook作为开发、维护和展示组件的辅助平台。在使用过程中,我们发现Storybook作为一种相当不错媒介,有...
1.首先,安装@storybook/react,react, react-dom, babel-core 等项目所需基础库。在 package.json 文件中添加 "storybook": "start-storybook -p 9001 -c .storybook" 2.新建文件,先看下项目目录结构 .storybook 文件夹存放 storybook 配置,及插件文件。
首先启动一个项目,这里以React为例:npx create-react-app my-app。 然后将storybook集成到工程中,参考官方文档,安装有点慢,然后等安装好之后,启动命令:npm run storybook, 就会在浏览器加载出一个页面,类似这种 会有一些引导步骤教你这个东西怎么用,这里有一些常用的方法,参考如下: ...
'storybook-react-intl', ] } reactIntl.ts Create a file in your .storybook folder called reactIntl.ts (or whatever you like). This is where you will set up your react-intl configuration. In this file, copy and paste the below code and make whatever modifications you need. const locales...
这里选用 jest 和testing-library ,我们通过 create-react-app 创建的 react 脚手架已经集成了单元测试的能力。 首先查看项目中的 setupTests.ts 有如下 Jest 断言增强的导入语句 import '@testing-library/jest-dom/extend-expect'; 然后在 Button 文件夹下增加 index.test.tsx 文件编写测试用例,先判断是否成功渲染...
在进行发布之前,我们还需要做一些配置,首先是修改入口文件,原本在 React 项目中,index.jsx文件是找到页面中 id 为 root 的根元素并渲染组件的,现在要修改成将所有定义的组件导出,开发者者通过 import 就能导入使用。 export{defaultasButton}from"./components/Button"; ...