storybook
storybook copied to clipboard
[Bug]: builtin event handler types are not supported well
Describe the bug
to reproduce:
- create a new project (I used
yarn create vite test-storybook --template react-ts
) - cd into it and init storybook (
npx storybook@latest init
- unfortunately,yarn dlx storybook@latest init
doesn't work) - go into the default
Button
component and changeonClick
from() => void
toReact.MouseEventHandler
- run storybook (
yarn storybook
)
in the docs for Button, you'll notice that onClick has a raw value of
_isMockFunction : true
getMockImplementation : () => this._ensureMockConfig(f).mockImpl
mock : {...} 5 keys
mockClear : () => { this._mockState.delete(f); return f; }
mockReset : () => { f.mockClear(); this._mockConfigRegistry.delete(f); return f; }
mockRestore : () => { f.mockReset(); return restore ? restore() : void 0; }
mockReturnValueOnce : (value) => f.mockImplementationOnce(() => value)
...
In the Primary story, you'll notice that the value of onClick
is onClick : {}
Changing the type of onClick
back to the default () => void
fixes the problem (onClick
is documented both in the docs and in the stories as -
)
To Reproduce
I created a test repo: https://github.com/herzaso/test-storybook
System
Environment Info:
System:
OS: macOS 12.6
CPU: (10) arm64 Apple M1 Max
Binaries:
Node: 18.7.0 - /opt/homebrew/bin/node
Yarn: 3.3.1 - /opt/homebrew/bin/yarn
npm: 8.15.0 - /opt/homebrew/bin/npm
Browsers:
Chrome: 112.0.5615.49
Safari: 16.0
Additional context
No response
Just noticed it here. Is there a solution to this, or am I going to have to manually mark each and every onSomething
as {control: false}
?