在前端开发领域中，使用 Jest 进行单元测试已经是越来越普遍的做法。而通过 Storybook 的方式来管理组件库则也是越来越受欢迎。如果能够把 Jest 和 Storybook 的优秀功能结合起来，不仅能够极大地提高我们的开发效率，而且为我们的组件库开发带来极大的好处。
@nlabs/storybook-addon-jest 正是一个优秀的 npm 包，它提供了一种简单易用的方式来在 Storybook 中运行 Jest 测试用例。在本文中，我们将详细介绍如何使用该 npm 包来管理组件库和进行测试。
安装和配置
首先，我们需要安装 @nlabs/storybook-addon-jest
npm install --save-dev @nlabs/storybook-addon-jest
然后，我们需要在 .storybook/main.js 中配置该插件。如果你还没有 .storybook/main.js 文件，可以通过执行 npx sb init 命令来生成该文件。
-- -------------------- ---- -------
-------------- - -
-------- --------------------------- ----------------------------------------
------- -
-------------------------
------------------------------
-- -------------------------------
-----------------------------
--
-- ----------
----- -
---------- ------------------------------
-
--接着，我们需要在 .storybook/preview.js 文件中引入 Jest 的测试环境。
-- -------------------- ---- -------
-- ---------------------
------ - --------- - ---- ------------------------------
------ ------- ---- -------------------------------
------ ----- ---------- - -
-- ---
-- ----------
--------------
--------
--------- ------------------------------------------------
----------- ----------------------------------
----- --- ------- -----
--
--运行测试
安装和配置完成后，我们可以在 Storybook 中运行我们的 Jest 测试用例了！在你的组件库项目目录下执行以下命令：
npm run storybook:test
如果你的 Storybook 还没有运行，该命令会帮你启动一个本地的 Storybook 服务器。
当我们运行测试时，会在 .storybook 目录下生成一个 .jest-test-results.json 文件，它包含了 Jest 的测试结果。我们需要将其导出，以便在 .storybook/preview.js 中使用。
npm run test -- --json --outputFile=.storybook/.jest-test-results.json
现在，你可以通过 Storybook 的 UI 来查看测试结果。只需要在你的组件库的 Storybook 页面中打开左侧菜单（Menu）并点击「Tests」即可。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------
------ ------- -
------ -----------------
---------- -------
--------- -
---------------- - -------- ------- --
------ - -------- ------ -
-
--
----- -------- - ------ -- ------- --------- ---
------ ----- ------- - ------------------
------------ - -
-------- -----
------ --------
--
-- ----
------ ----- ---- - -- -- ------- -------------- ----------- ------------------
--------------- - -
----- ------------------
--在上面的例子中，我们为组件编写了一系列 Jest 测试用例，并通过 Test.parameters.jest 属性将其与该组件关联起来。这样一来，当我们在 Storybook 的 UI 中选择该组件时，就可以通过「Tests」选项卡来查看与该组件关联的测试用例。
总结
通过使用 @nlabs/storybook-addon-jest，我们可以简单明了地将 Jest 及其测试用例集成到我们的组件库开发流程中。此外，它还提供了在 Storybook UI 中查看测试结果的便捷方式。希望这篇使用教程能够帮助你更加高效地进行组件库开发和单元测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd981e8991b448e67ff