小技巧——故事书播放功能

故事书 是许多开发人员将其用作他们正在创建的组件的实验室环境的首选工具。 Storybook 渲染组件，然后与它们交互，更改它们的道具并查看更改的结果。

但有时您可能想在组件渲染后模拟用户交互或使用一些公开的组件 API。你怎么能那样做？

在这篇简短的文章中，您将熟悉 Storybook 玩 函数，它使您能够在组件渲染后挂钩操作。

播放功能

故事书故事可以帮助开发人员在实验室环境中测试他们的组件。当您想模拟与组件的交互或使用从组件公开的功能时，您需要挂钩 玩 函数到您的模板实例。

这 玩 function 是一个钩子，使您能够在组件渲染后与它进行交互。在使用它之前，您需要确保 Storybook 的 插件交互 已安装。您可能要安装的另一个软件包是 @storybook/测试库 ，它可以帮助您使用 Storybook 公开的 DOM。如果未安装软件包，请在项目根文件夹的命令行中运行以下命令：

 npm install — save-dev @storybook/addon-interactions @storybook/testing-library

安装软件包后，您应该确保 插件交互 插件被添加到插件列表中 .storybook/main.js 文件：

 模块.exports = {  
 故事：[]，  
 插件：[  
    **'@storybook/插件交互'**  
 ]  
 };

现在一切就绪，让我们看看如何使用 玩 故事文件中的功能。

发挥作用

这 玩 函数被添加到 Storybook 模板的实例中，例如添加故事 参数 ：

**进口** { ** _屏幕_** } **来自'@storybook/testing-library'** ; ... // 一些故事定义 **导出常量 _默认_** = 模板.bind({});  
 ** _默认_** .play = **异步** () => {  
  **_屏幕_** . _getByTestId_ ( **“someElementTestId”** ）。节目（ **《你好故事书》** );  
 }

在这个小例子中需要注意的几点：

• Play 可以有异步交互，因此我使用 异步 关键词。在此示例中，没有等待但可能有（例如等待模拟用户交互）。
• 我用 屏幕 对象来自 @storybook/测试库 通过它的测试 id 抓取一个元素。您应该确保该元素确实有一个测试 id，就像使用的那个一样，否则您会得到一个错误。
• 在从 DOM 中查询到元素后，一旦我获得了元素，我就可以与它进行交互。在此示例中，我调用了一个公开的 API 函数，称为 节目 .

这个例子很简单，你绝对可以做一些复杂的事情，比如使用测试库 API 运行用户事件（点击、打字等），撰写多个故事等等。

概括

在帖子中，您了解了 玩 Storybook 中的功能。这 玩 function 是一个非常方便的钩子，使您能够在组件在 Storybook 预览部分中呈现后“播放”用户交互或组件公开的 API 函数。

如果您有任何疑问，请随时在评论部分写下它们。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/30322/41571208

标签：插件,技巧,storybook,故事书,Storybook,组件,播放,交互
来源： https://www.cnblogs.com/amboke/p/16685444.html