认识 @nlabs/storybook-addon-actions
@nlabs/storybook-addon-actions 是 Storybook 中一个非常常用的插件，它可以帮助我们对组件进行交互测试，例如点击按钮、输入框输入等等，可以模拟用户的操作，这样在开发时就可以快速找到和解决问题。
该插件提供了一个简单但强大的 API，开发者只需要在组件的事件上添加一行代码，就可以记录每个交互操作，并轻松地组织和过滤这些操作。
安装使用
安装：
npm i -D @nlabs/storybook-addon-actions
然后在 .storybook/main.js 中：
module.exports = {
// ...
addons: ['@nlabs/storybook-addon-actions/register'],
};使用示例
假设我们有一个 Button 组件：
import React from 'react';
const Button = ({ children, onClick }) => {
return <button onClick={onClick}>{children}</button>;
};
export default Button;我们要对这个按钮组件进行测试，所以我们在按钮上添加一个 onClick 事件：
import React from 'react';
import { action } from '@nlabs/storybook-addon-actions';
const Button = ({ children, onClick }) => {
return <button onClick={action(onClick)}>{children}</button>;
};
export default Button;通过 action 函数包装 onClick 事件，就可以记录每次的交互操作：
通过点击按钮的操作，可以看到我们记录了两个操作，每个操作都包含了组件名称以及所发生的事件：
Button on click Button on click
现在我们可以在 Storybook 的 Action Logger 面板中查看这些操作：
可以看到操作非常直观，操作数据清晰明了，我们可以根据这些操作记录快速定位 bug，并快速响应问题。
指导意义
在前端开发中，我们经常需要对组件进行交互测试，这通常需要编写一些代码来记录和分析交互操作，这会浪费大量的时间和精力。
@nlabs/storybook-addon-actions 插件提供了一种非常直接的方式，可以快速地记录和分析交互操作，从而提高我们的开发效率和质量。
同时，该插件提供了非常简洁和实用的 API，通过简单地添加一行代码，就可以记录所有的交互操作，让我们可以非常轻松地进行组件测试。
总之，@nlabs/storybook-addon-actions 是一个非常实用的插件，建议开发者在开发时使用它，可以提高我们的开发效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd881e8991b448e67c3