Storybook for React — Testing with Viewports and Actions

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.