@gooddata/test-storybook 是一个测试组件库的 npm 包，它可以帮助您在 Storybook 中运行可自动化测试的组件库。在本文中，我们将详细介绍如何安装和使用 @gooddata/test-storybook。
什么是 Storybook？
如果您是 React、Vue 或 Angular 开发者，那么您可能已经熟悉 Storybook。Storybook 是一个 UI 组件开发环境，它可以让您以交互方式查看和测试 UI 组件，而不需要运行整个项目。您可以为主题、布局、动画和状态创建可重用的组件，并将其呈现在 Storybook 中。
安装 @gooddata/test-storybook
首先，您需要为项目安装 Storybook。您可以按照这个链接的指引来安装。
接下来，您可以通过运行以下命令来安装 @gooddata/test-storybook：
--- ------- ------------------------ ----------
编写测试脚本
现在，您可以编写测试脚本了。@gooddata/test-storybook 使用 Jest 来运行测试。您可以创建以下文件：
-- ------------------
------ - -------- - ---- ---------------------------
----------
------------ ---------- -- ----- --------------- ---------------------------
------------- ------------------------
------ -
----------------------------
-----------------------------
--
--------------- -
----- -
---------------
---------------------------
--
--
---我们来看一下这段代码的含义：
runTests函数将启动 Jest 并执行测试。它接受一个对象作为参数，其中包含所有必要的配置信息。testWrapper是一个用于将组件包装到测试中的函数。在这个例子中，我们将组件包装在一个带有大量填充的<div>中，这样可以便于查看和测试。storybookUrl：指定 Storybook 的 URL。paths：用于查找测试文件的 glob 模式。browserOptions：用于配置测试浏览器的选项。
执行测试
一切准备就绪，我们现在可以运行测试了！
在命令行中输入：
--- --- --------------
运行该命令后，Jest 会在 Storybook 中自动运行测试。
示例代码
以下是一个简单的测试脚本示例：
------ - ----- - ---- ------------------
------ - --------- - ---- -----------------
------ -------- ---- -----------------
--------------------- -------
---------- ------ -- -- --
----------- - -------- --
--------- ----------------- ---------------
----
-------------------- -- -- -
----------- ---- ----------- -- -- -
----- ------- - ----------------
------------------------------------- -----
---
---在这个例子中，我们测试了 MyButton 组件是否正确地呈现了文本。在 storiesOf 中，我们为组件添加了一个带有文本的 slot，并将其呈现在 Storybook 中。在 describe 中，我们编写了测试代码，检查 MyButton 组件是否正确地呈现了这段文本。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/they-test-storybook