简介
@storybook/addon-jest 是一个 Storybook(一个 UI 套件)中的 Jest 插件,它可以将 Jest 测试结果嵌入到 Storybook UI 中。在前端开发中,Jest 是一个流行的 JavaScript 测试框架,而 Storybook 则可以用于开发、设计和测试 React 组件。将它们结合起来可以非常方便地开发和测试 React 组件。
在本篇教程中,我们将介绍如何使用 Storybook/Jest 插件来编写和运行测试用例,以提高组件的质量和稳定性。
安装
第一步是安装 npm 包,可以使用以下命令:
--- ------- ---------- ---------------------
该插件依赖 Jest,如果你还没有安装 Jest,请先安装它。
示例
让我们使用一个简单的 React 组件作为示例,它接受一个数字 prop,将它们相加并将结果显示在页面上。
------ ----- ---- -------- ----- ----- - ---- --- -- - ----- --- - --- - -- - -- ------ -- ------ ------- ------
接下来,让我们为 Adder 组件编写测试用例。在 src
目录下创建一个 __tests__
目录,并在其中创建一个名为 Adder.test.js
的文件。
------ ----- ---- -------- ------ - ----- - ---- --------- ------ ----- ---- ----------- ----------------- -- -- - ---------- --- --- --------- -- -- - ----- ------- - ------------ ----- ----- ---- --------------------------------- - - - ---- --- ---
在这个测试用例中,我们使用 enzyme
包来包装 React 组件,并断言组件的行为是否符合预期。
为了使用 Storybook 插件来运行这个测试用例,请在 .storybook/main.js
文件中添加以下内容:
-------------- - - ------- -------------------------- --
注意,该插件只适用于 Storybook 6.0.0 或更高版本。
现在,运行 Storybook 并访问该组件的 Story 页面,我们将看到 Jest 测试结果的面板:
在测试运行完毕后,您可以单击面板上的内容来查看测试的详细结果。
总结
Storybook 和 Jest 是非常流行的前端工具,可以帮助开发人员编写高质量、稳定的 React 组件。我们可以使用 Storybook 插件来将 Jest 测试结果嵌入到 Storybook UI 中,从而更方便地编写和运行测试用例。希望这篇文章对你有所帮助!
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/storybook-addon-jest