Actions addon overview
Actions show that an event handler callback has been called and display its arguments. The actions panel can show both story args and other function calls.
essentials/actions
11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Create actions with fn() spy
The recommended way to create an action arg is to assign fn() to an arg, which creates a mock function that is automatically spied on by Storybook. This is useful for writing interaction tests. When your component calls an arg with an fn() assignment (via user interaction or play function), the event shows up in the actions panel.
Name mock functions with mockName
When defining a mock function with fn() outside of args, you must provide a name for it to automatically log to the actions panel by calling mockName() on the result. Example: const handleClick = fn().mockName('handleClick');
Auto-match argTypes with argTypesRegex
You can use a global parameter with argTypesRegex to automatically create actions for each argType matching a pattern, such as all argTypes starting with 'on'. This is useful when components have many event handlers. However, this is not the recommended approach because automatically inferred args are not available as spies in play functions. If using argTypesRegex with play functions, you must also define args with the fn utility to test them.
Log non-story function calls
You can log function calls unrelated to story args using two approaches: spyOn from storybook/test or the action function from storybook/actions. For basic logging, use a function spy. For complex scenarios, use the action function directly.
Use spyOn to log function calls in actions panel
The spyOn utility function from storybook/test automatically logs function calls in the actions panel. Spies appear with a default name which you can customize by calling the mockName method.
Filter function calls with action function
You can override spyOn behavior by providing a custom implementation that calls the action function from storybook/actions only if it matches a specific condition, preventing logging of all calls to the spied function.
Actions addon parameters API
The actions addon contributes the following parameters under the 'actions' namespace: argTypesRegex (string, required false) - create actions for each arg matching the regex; disable (boolean) - disable the action panel, useful for overriding at specific levels; expandLevel (number, default 1) - controls how many levels deep the action tree is initially expanded, useful when action arguments contain nested objects.
action() function from storybook/actions
The action() function allows creating an action that appears in the actions panel when clicked. It has the signature (name?: string) => void and takes an optional name parameter to identify the action in the UI.
configureActions() global options
The configureActions() function from storybook/actions configures global behavior of the actions addon. Call it in .storybook/preview.ts|tsx or before actions are used. Available options: limit (number, default 50) - maximum action entries to display, oldest discarded when limit reached; clearOnStoryChange (boolean, default true) - clear actions panel when navigating to different story; depth (number, default 10) - serialization depth for action arguments.
configureActions() example
Example of configuring actions in .storybook/preview.ts|tsx: import { configureActions } from 'storybook/actions'; configureActions({ limit: 20, clearOnStoryChange: false, });