https://github.com/wix-incubator/storybook-snapper

https://github.com/wix-incubator/storybook-snapper

applitools eyes-storybook storybook visual-testing

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/wix-incubator/storybook-snapper
• Owner: wix-incubator
• License: mit
• Created: 2019-09-05T11:03:29.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-06-28T11:19:10.000Z (over 1 year ago)
• Last Synced: 2024-04-17T02:46:43.946Z (9 months ago)
• Topics: applitools, eyes-storybook, storybook, visual-testing
• Language: TypeScript
• Size: 408 KB
• Stars: 4
• Watchers: 61
• Forks: 3
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# storybook-snapshot

A utility library originally created as an accompanying tool for [`eyes-storybook`](https://github.com/applitools/eyes-storybook).

The idea is to write snapshot tests as `describe/it` test suites like in familiar testing frameworks. Each test suite creates a `storybook` story, which `eyes-storybook`, in turn, takes a snapshot of.

This library relies on some of `eyes-storybook`'s methods, however, it does not depend on `eyes-storybook`, which means it can be used just for generating stories.

## Usage

Install with

```bash

npm install --save-dev storybook-snapper

```

or

```bash

yarn add --dev storybook-snapper

```

For testing, use the `applitoolsConfig` method in your `applitools.config.js` file, in order to generate a preconfigured configuration.

This configuration is necessary for async tests to work.

In you `applitools.config.js` file:

```js

const applitoolsConfig = require('storybook-snapper/config/applitools.config');

// optional local configuration file for overrides

let config;

try {

  // for local testing you can add the `apiKey` to your private configuration file

  config = require('./applitools.private.config.js');

} catch (e) {}

// Note that the `appName` property is required

module.exports = applitoolsConfig({config});

```

In your visual/story file:

```jsx

import React from 'react';

import { visualize, story, snap, xsnap } from 'storybook-snapper';

import { MyComponent } from 'path/to/MyComponent';

visualize('MyComponent', () => {

    story('basic story', () => {

        snap('simple render', );

        snap('as a function', () => );

    });

    story('another story', () => {

        class AsyncStoryWrapper extends React.Component {

            componentDidMount() {

                setTimeout(() => {

                    this.props.onDone();

                }, 3000);

            }

            render() {

                return ;

            }

        }

        snap('async story', done => );

    });

    snap('only one level of nesting', );

    /**

    * when used with eyes-storybook,

    * a snapshot can be ignored with xsnap

    */

    snap.skip('ignore this test', );

    /**

    * alias for "snap.skip"

    */

    xsnap('ignore this test', );

    /**

    * adds a red outline when a snapshot is taken

    * helpful for debugging async stories

    */

    snap.debug('debug story', done => )

});

```