Limits of Storybook addon-controls with non-serializable props in 6.x and 7.x
0 reputation · 29 Apr 2023, 05:25 UTC
Limits of Storybook addon-controls with non-serializable props in 6.x and 7.x
Storybook's addon-controls panel serializes prop values using JSON.stringify. In Storybook 6.x and 7.x, values that are not JSON-serializable—such as functions, symbols, circular references, or undefined—are replaced by a non-editable placeholder or removed from the controls list entirely. Because the panel does not expose a documented parameter or addon option to substitute a custom serializer, teams cannot override this default behavior through standard configuration.
When a placeholder appears, the control cannot be edited, and invoking the prop from the UI is a no-op. This makes callback props effectively invisible to interactive testing within Storybook, even though the component may rely on them at runtime. The behavior is consistent across recent minor releases because the serialization logic is embedded in the core @storybook/addon-essentials package.
Given these constraints, is there any supported mechanism to configure serialization for non-serializable props in addon-controls? If not, what is the recommended boundary for using controls with function or circular props without misrepresenting component testability?