前言
随着前端开发需求日益增长，我们需要将测试工作变得更加高效和自动化。Jest 是一个流行的 JavaScript 测试框架，同时 Storybook是一个用于交互式 UI 组件开发的工具。
在本文中，我们将介绍 npm 包 storybook-addon-jest，它是 Storybook 创作者团队提供的一种方便的测试工具，可以将 Jest 测试结果集成到 Storybook 页面中。
在学习本教程前，需要了解 Jest 测试框架基础，如果你还不了解 Jest，请先访问 官方网站 进行学习。
安装
首先，需要在你的项目中安装 Storybook，如果你还没有在项目中使用 Storybook，请使用以下命令进行安装。
npx sb init
在安装完毕之后，安装storybook-addon-jest依赖。
npm install storybook-addon-jest --save-dev
开始使用
在为应用添加 Storybook 后，需要在配置文件main.js中添加插件支持。在我们的例子中，我们假设已经安装了 Storybook，图片文件夹名称为.storybook。
-- -------------------- ---- -------
-------------- - -
-------- --------------------------- ----------------------------------------
------- -
-------------------------
------------------------------
-
----- ------------------------
-------- -
------------- -----
--
--
-----------------------
-- --- ---------- ------ -- ------
--
--接下来，我们需要在 Storybook 组件中添加测试代码和配置。此时，我们创建一个 example.stories.js 文件来展示 storybook-addon-jest 的使用。在这个例子中，我们将检查 NumberConverter 组件是否正确处理小数。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ - --------- - ---- ------------------------ ------ --------------- ---- -------------------- ------ ------- ---- ------------------------- ---------------------------- ------- ------------------------- ------- --- -- ---- -------------------- ---- ---- ------- ------------- -- -------- -- -- ---------------- ----------- ---------- -------- --- ------------ -- --------- -- -- ---------------- --------------- ---------- -------- ----
最后，在运行 Storybook 时，将测试结果页添加到导航栏中。运行以下命令，并在浏览器中打开 http://localhost:6006 即可查看结果。
npm run storybook
示例代码
以下是 NumberConverter 组件和相关测试代码的实现示例，以帮助大家熟悉如何使用 storybook-addon-jest。
-- -------------------- ---- -------
-- ------------------
------ ----- ---- --------
----- --------------- ------- --------------- -
-------- -
-- ---------------- --- ----- -- ------------- --- ------ -
----- ------ - ---------------------------------
------ --------------------
- ---- -- ---------------- --- ----- -- ------------- --- ------ -
----- ------- - --------------------------- ---
------ ---------------------
- ---- -
------ ------------ ------------------
-
-
-
------ ------- ------------------ -------------------- ---- -------
-- -----------------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------------- ---- --------------------
---------------- ----------- -- -- -
----------- -- -------- -- -- -
----- ------- - ------------------------ ---------- -------- ----------- ----
---------------------------------------
---
---------- -- --------- -- -- -
----- ------- - ------------------------ ---------- -------- --------------- ----
-------------------------------------
---
---结尾
在本文中，我们已经了解了如何使用 storybook-addon-jest，并将 Jest 测试结果展示在 Storybook 页面中。
如果您正准备为您的前端应用添加多个 Storybook，那么 storybook-addon-jest 可以帮助您更加方便地测试您的应用。
最后，希望本文能够为您提供有用的信息，并指导您使用 storybook-addon-jest 更好地管理您的代码库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566bc81e8991b448e3077