New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,490
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
hermione-storybook
Storybook addon that makes it easy to write hermione tests and speed up their execution time
npm install hermione-storybook
Last updated 4 months ago
8
Downloads per week
Readme View on GitHub

hermione-storybook

A storybook addon that makes it easy to write hermione tests on storybook component and speeds up their execution time.

Installation

npm install hermione-storybook --save-dev

Usage

hermione-storybook is not only a storybook addon, but also it is a plugin for hermione which adds selectStory command to open story via storybook API.

Storybook

If you use storybook@6 and higher:

  • Add hermione-storybook addon into your storybook config:
// .storybook/main.js
module.exports = {
    // ...
    addons: [
        // ...
        'hermione-storybook'
    ]
}

If you use storybook@5:

  • Add hermione-storybook decorator to your .storybook/config.js file:
// .storybook/config.js
import { addDecorator, configure } from '@storybook/react';
import { withHermione } from 'hermione-storybook';

addDecorator(withHermione());

configure(...);

Hermione

  • Add hermione-storybook plugin into your hermione config:
// .hermione.conf.js
module.exports = {
    plugins: {
        'hermione-storybook/plugin': {
            enabled: true,
            storybookUrl: 'http://localhost:6006'
        },

        // other hermione plugins...
    },

    // other hermione settings...
}
  • Write hermione-test using selectStory command from plugin:
describe('button', () => {
    it('primary', async function() {
        await this.browser.selectStory('example-button--primary', {label: 'New button label'}); // second parameter with `args` works only for storybook@6 and higher

        await this.browser.assertView('plain', 'body');
    });
});

Hermione

Configuration

  • enabled (optional) Boolean – enable/disable the plugin. By default plugin is enabled;
  • storybookUrl (required) String - url to your storybook server (example - http://localhost:6006). Moreover it can be specified as a relative url for baseUrl option in hermione. By default url is http://localhost:6006;

Also there is ability to override plugin parameters by CLI options or environment variables (see configparser).

Use hermione_storybook_ prefix for the environment variables and --storybook- for the cli options.

API

Plugin adds the following commands to the hermione:

  • selectStory - command to open passed story via storybook API. Moreover it can also take arguments which should be updated for the story.

Examples:

  • open passed story:
await this.browser.selectStory('example-button--primary');
  • open passed story and change label and size args (changing args works only for storybook@6 and higher):
await this.browser.selectStory('example-button--primary', {label: 'Some label', size: 'large'});

Tips & Tricks

  • To check that the hermione-storybook addon is connected to your storybook project correctly, you need to open the preview iframe (for example - http://localhost:6006/iframe.html) and call window.__HERMIONE_SELECT_STORY__ method like that:
window.__HERMIONE_SELECT_STORY__('example-button--primary', {label: 'Some label'});

After that your story with id example-button--primary will be rendered on preview iframe. It means that everything works fine.

  • To convert old url queries selectedKind and selectedStory (users of storybook@5) to story id you can use the following helper:
import { toId, storyNameFromExport } from '@storybook/csf';
const storyId = toId(selectedKind, storyNameFromExport(selectedStory));
Join the community
6,324 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI