Storybook (https://storybook.js.org/) 是一个很不错的开源工具,用于帮助前端组件开发,可以支持React, Vue和Angular等框架。
正如它的名字所预示的一样,使用它可以写出组件库的活的用户故事(user story)。
它的网站首页这样说道:storybook 为UI组件提供一个独立的沙箱环境,在这里无论是edge case还是难于遇到的状态都可以造出来。可以把use case 像故事一样展现出来。
想象一下过去我们如果希望单独测试一个组件的行为和表现该怎么做?我不知道各位大佬如何,反正我就老老实实地写个页面(甚至专门建个测试用的project)把组件扔进去,再启动测试服务器,打开浏览器和调试窗口…
有了Storybook, 终于可以鸟枪换炮了,而且这些story不是写写测试一下就没有用了,它们不仅可以供以后测试用比如UT,也可以用于生成文档。这样的话原来老土的手工活在工具话流程化后突然变得高大上了…
storybook 的界面如上图所示,左面边栏是story 列表,右面主要部分就是要展示的目标组件。右下的面板可以做一些控制比如改变状态。