Storybook for React — Testing with Viewports and Actions
Tags: react, webdev, programming, javascript
Published: 2021-01-24 21:45:16

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


Storybook lets us prototype components easily with various parameters.

In this article, we’ll look at how to work with addons for Storybook.

### Action Event Handlers

We can specify event handlers that our button handles with the `parameter.action.handles` property.

To do that, we can add that property to the object we export in the story:

`Button.stories.js`

```
import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    actions: {
      handles: ['mouseover', 'click .btn']
    }
  }
};
```

We added an array of events to listen to.

Now when we move our mouse over the button or click it, we’ll see the event object displayed in Storybook’s console.

### Viewport

Storybook gives us a set of common viewports to test with.

We can change the `defaultViewport` property in `.storybook/preview.js` so add the default viewport:

```
import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';

export const parameters = {
  viewport: {
    viewports: MINIMAL_VIEWPORTS,
    defaultViewport: 'someDefault',
  },
}
```

We import the `MINIMAL_VIEWPORTS` object to show a few viewports to we can choose from.

`defaultViewport` lets us set the default viewport name.

We can also add our own viewport sizes:

```
const viewports = {
  tablet: {
    name: 'tablet',
    styles: {
      width: '720px',
      height: '1280px',
    },
  },
  tablet2: {
    name: 'tablet 2',
    styles: {
      width: '1024px',
      height: '768px',
    },
  },
};

export const parameters = {
  viewport: {
    viewports,
    defaultViewport: 'tablet',
  },
}
```

We added a `viewports` object with the viewports we want to show on the dropdown menu.

Now we can set the sizes by choosing these sizes.

`name` has the names that are shown in the dropdown.

For example, we can write:

`.storybook/preview.js`

```
import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';

const viewports = {
  tablet: {
    name: 'tablet',
    styles: {
      width: '720px',
      height: '1280px',
    },
  },
  tablet2: {
    name: 'tablet 2',
    styles: {
      width: '1024px',
      height: '768px',
    },
  },
};

export const parameters = {
  viewport: {
    viewports: {
      ...MINIMAL_VIEWPORTS,
      ...viewports
    },
    defaultViewport: 'tablet',
  },
}
```

We merged the `MINIMAL_VIEWPORTS` and the `viewports` objects into one and set it as the value of the `viewports` property.

Now we see entries from both objects displayed in the dropdown.

### Configuring Viewports Per Component or Story

We can also configure viewports per component or story.

To do that, we add the `parameters.viewport` property:

`Button.stories.js`

```
import React from 'react';
import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    viewport: {
      viewports: MINIMAL_VIEWPORTS,
      defaultViewport: 'iphone6'
    },
  }
};
```

to set the viewports of the `Button` stories to the `MINIMAL_VIEWPORTS` object.

To set the viewport for a story, we can write:

```
import React from 'react';
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

Primary.parameters = {
  viewport: {
    defaultViewport: 'small mobile'
  },
};
```

Now we set the default viewport for the `Primary` story.

### Conclusion

We can set the viewport choices for different stories with Storybook so we can test with various screen sizes.