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