介绍
@storybook/addon-storyshots 是一个 Storybook 的插件，可以用来自动生成组件的快照测试。Storyshots 可以把组件渲染成图片（.png）或者 JSON 格式，方便进行组件的自动化测试。
安装
首先，需要在项目中安装 @storybook/addon-storyshots 依赖。
npm install --save-dev @storybook/addon-storyshots
使用
在项目中，需要创建 .storybook 目录，并在其中创建 main.js 和 storybook.storybook.js 两个文件。其中 main.js 文件的内容如下：
module.exports = { stories: ['../src/**/*.stories.js'], addons: ['@storybook/addon-storyshots'], };
在 storybook.storybook.js 文件中，需要导入 initStoryshots 方法，内容如下：
import initStoryshots from '@storybook/addon-storyshots'; initStoryshots();
这样，就完成了 Storyshots 的配置。
接下来，在组件库的 .stories.js 文件中，需要添加 Storyshots 的测试用例。一个例子如下：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ - ------ - ---- ------------------------ ------------------- ------- ---------- ------ -- -- - ------------- --------------- -- ---------- ------- -- -- - -------- ----- ---------- -------------- ------ -- -- -- -- ------- --------- ---展开代码
最后，可以运行 npm run test:storybook 来测试 Storyshots 是否正常工作。如果一切正常，就会生成一张组件的快照测试图片。
意义
使用 Storyshots 可以缩短开发时间，提升开发效率。通过快照测试，可以确保组件的 UI 没有发生意外变化，保证了组件的可靠性和稳定性。
总结
本篇文章介绍了如何使用 Storyshots 这个 npm 包，通过配置和测试用例，实现了对组件 UI 的自动化测试和快照测试生成。对于前端开发者来说，能够熟练掌握 Storyshots 的使用，可以为项目开发提供更加可靠的组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/128015
