在前端开发中，我们经常需要进行 UI 测试以确保代码的正确性和一致性。@kadira/storyshots 是一个基于 Storybook 的 npm 包，可以帮助我们进行 UI 测试。本文将为您提供详细的教程，以及示例代码和学习指导。
什么是 @kadira/storyshots？
@kadira/storyshots 是一个 npm 包，旨在帮助开发者进行 UI 测试。它基于 Storybook，可以在运行时获取 Storybook 中的故事 (Story)，并生成与其对应的快照（Snapshot）。快照是一种静态的、轻量级的文件，其中包含了一个完整组件的呈现情况。@kadira/storyshots 可以在持续集成环境中运行，检查每个 UI 组件是否与它所对应的快照一致。
如何使用 @kadira/storyshots？
首先，我们需要在项目中安装 @kadira/storyshots：
npm install --save-dev @kadira/storyshots
然后，我们需要将 @kadira/storyshots 配置到 Jest 配置中。Jest 是一个 JavaScript 测试框架，可与 @kadira/storyshots 一起使用以进行测试。具体操作如下：
- 在 package.json 中添加以下脚本：
"scripts": {
...
"test": "jest"
...
}- 在项目的根目录中添加一个 jest.config.js 文件，内容如下：
-- -------------------- ---- -------
-------------- - -
-- -- ---- -------
---------- ----------------------------
-- -- ---- -----
---------------- --------
-- -- ---- --------
-------------------- -----------------------------
-- -- ---- -- ------------------ ----
------------------- -----------------------
-- -- ---- -- --------- ------
------------- --------------------------------- ---------------------------------
------------------------ --------------------------
--在上面的配置文件中，我们使用 testMatch 指定了测试文件的匹配规则，testEnvironment 指定了 Jest 的测试环境，snapshotSerializers 指定了 Jest 的快照序列化引擎，setupFilesAfterEnv 使用了 @kadira/storyshots，watchPathIgnorePatterns 配置路径以忽略 Storybook 的预处理过程。
- 创建一个名为 *.storyshots.test.js 的文件，如：
import initStoryshots from '@storybook/addon-storyshots' initStoryshots()
这个文件告诉 Jest 使用 @kadira/storyshots 进行测试。
至此，我们已经完成了配置过程。您可以运行 npm test 命令，自动启动 Jest 并使用 @kadira/storyshots 进行测试。如果您已使用 Storybook 构建了 UI 组件库，则每个 UI 组件的快照将自动生成并与其相关联。
学习指导
@kadira/storyshots 不仅能够帮助前端开发者进行 UI 测试，而且还提供了很多有用的学习资料。通过学习它的源代码，我们可以获得一个了解 Storybook、Jest 等技术的良好起点。
作者还维护了其官方文档，其中包含了一些有关 @kadira/storyshots 的常见问题解答，这些内容可帮助开发者更好地理解和使用这个工具。
总之，通过学习 @kadira/storyshots，我们不仅可以更好地进行 UI 测试，而且可以提高前端技术的深度和广度。
示例代码
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ ----------- ---- ---------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ---
---------------------------------
--
--结论
本文详细介绍了 @kadira/storyshots 的使用教程，让读者了解了如何将其整合到项目中进行 UI 测试。同时，我们还提供了示例代码和学习建议，以帮助读者更好地了解这个 npm 包并加深对前端技术的学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/kadira-storyshots