I don't understand how argTypes/actions works. How to pass onClick function?

[piscespieces]

I'm currently trying to implement an onClick action to a very simple component. However I'm not able to make it happen. The documentation is not clear enough by just providing little code snippets that make sense but that does not show you the overall picture.

Let's say that this is my component:

ButtonTest.js

import React from 'react';
import { Button } from '@material-ui/core';

export const ButtonTest = () => {
    const onClick = () => {
        //
    };

    return (
        <Button
            onClick={onClick}
            color='primary'
            variant='contained'
            children='click me'
        />
    );
};

export default ButtonTest;

ButtonTest.stories.js

import React from 'react';
import { ButtonTest } from '../components/ButtonTest';

export default {
    title: 'ButtonTest',
    component: ButtonTest
};

const Template = args => <ButtonTest { ...args }/>;

export const Default = Template.bind({});

The button gets displayed in my port 9009 but as you can see, I'm not passing the onClick function as a prop. How am I going to be able to mock that onClick function that the component takes?

[jonniebigodes]

@piscespieces sorry for the issue you're running into. Documentation wise as you may or may not it's an ever mutating organism and constantly being updated and improved. During the transition to 6.0 it was decided to keep the documentation lean and efficient flow and snippet wise. If we decided to incorporate every use case it would eventually reach a point that it would be unmaintainable.

Regarding this:

The button gets displayed in my port 9009 but as you can see, I'm not passing the onClick function as a prop.

The short answer is that you don't need to.

The long answer is, when you add Storybook to your project it will include the actions essentials addon along with other ones that are part of the essentials package.
Also during the install process you get also the default configuration split into a couple of files:

• main.js to handle addons you might want to use. Additional configurations, such as webpack and and handle the stories loading.
• preview.js will handle ui aspects, such as decorators and parameters among other items.

By default your .storybook/preview.js might be somewhat similar to:

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

Breaking down the snippet above, here's what is happening. We're declaring a parameter that targets the actions (by actions the addon that is included), and telling it and Storybook to be on the lookout for any action/event that starts with on and act on it and log it to the appropriate panel in the UI. With this making the story definition/implementation smaller and more leaner.

Hope that it helped clarify a bit.

Stay safe

[piscespieces]

Thanks for your response. It pointed me in the right direction:

However a little bit of context may be appreciated:

A few months back I started working on this project with Storybook version 5+. Recently I had to revisit the project Storybook since a few things had change. There were quite huge changes between Storybook 5 & 6. The documentation has changed a lot as well.

Just by updating Storybook npm update storybook won't install the new dependencies that storybook 6 requires.
I had to manually install @storybook/addon-essentials, @storybook/addon-links, storybook/node-logger. (still not sure if those are all the required new dependencies, but that did part of the trick for me).
Also noticed that making sure you are doing your PropTypes on each component is what got me the Redux Actions that I'm passing as props to work. (that's something that I found after creating a brand new create-react-app project and installing storybook from scratch to compare, but I didn't notice any reference to that in the docs).

Also very important, after creating the preview.js file. Mine looks like this:

export const parameters = {
  actions: { 
    argTypesRegex: "^on[A-Z].*",
    argTypesRegex: "^fetch[A-Z].*" ,
    argTypesRegex: "^create[A-Z].*",
    argTypesRegex: "^update[A-Z].*"
  },
}