How to use @storybook/addon-jest - 10 common examples

const LIGHT_SWATCH = Object.assign({ name: 'Light' }, LightTheme);
const DARK_SWATCH = Object.assign({ name: 'Dark' }, DarkTheme);

const themes = [LIGHT_SWATCH, DARK_SWATCH];

addDecorator(withThemesProvider(themes));

addDecorator(
  withOptions({
    addonPanelInRight: true,
    hierarchyRootSeparator: /\|/,
  })
);

addDecorator(
  withTests({
    results,
  })
);

addDecorator(story =&gt; <div style="{{">{story()}</div>);
addDecorator(withNotes);
addDecorator(withKnobs, {
  knobs: {
    timestamps: true,
    escapeHTML: true,
  },
});

// automatically import all files ending in *.stories.js
const req = require.context('../src/app/', true, /.stories.js$/);

import '../../storybook-utilities/storybook-theming/_docs.scss';
import { withA11y } from '@storybook/addon-a11y';
import sparkTheme from "../../storybook-utilities/storybook-theming/storybook-spark-theme";
import { withTests } from '@storybook/addon-jest';
import results from '../src/.jest-test-results.json';
import '!style-loader!css-loader!sass-loader!../../storybook-utilities/storybook-theming/font-loader.scss';
import '../../storybook-utilities/icon-loader';
import { DocsContainer } from '@storybook/addon-docs/blocks';
import { SprkTable } from '@sparkdesignsystem/spark-react';
import { configClassModifierJsonProcessor } from '../../storybook-utilities/configClassModifierJsonProcessor';

const classModifierJSON = require('../../src/data/sass-modifiers.json');

addDecorator(withA11y);
addDecorator(
  withTests({
    results
  }
));

// Option defaults.
addParameters({
  options: {
    theme: sparkTheme,
    showRoots: true,
    storySort: (a, b) =>
      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
  },
});

addParameters({
  docs: {

import { configure } from '@storybook/react';
import { addDecorator } from '@storybook/react';
import { withTests } from '@storybook/addon-jest';
import results from '../.jest-test-results.json';
import '../src/App.css';

// load stories dynamically
const req = require.context('../src', true, /\.stories\.js$/);
function loadStories() {
    req.keys().forEach(filename => req(filename));
}

// load tests results dynamically
addDecorator(
    withTests({
        results,
    })
);

configure(loadStories, module);

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.tsx$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addDecorator(
  withOptions({
    name: 'React Datepicker',
    url: 'https://github.com/y0c/react-datepicker',
    addonPanelInRight: true,
  })
);

addDecorator(
  withTests({
    results,
    filesExt: '.test.tsx',
  })
);

addDecorator(withKnobs);
addDecorator(
  withInfo({
    inline: true,
  })
);

configure(loadStories, module);

options: {
    showPanel: true,
    panelPosition: 'bottom',
    isToolshown: true,

    name: 'Material Bread',
  },
  backgrounds: [
    { name: 'white', value: '#fff', default: true },
    { name: 'light', value: '#eeeeee' },
  ],
  viewport: {},
});

addDecorator(
  withTests({
    results,
  }),
  withA11y,
);

function loadStories() {
  require('../src/storybook/stories');
}

configure(loadStories, module);

// Create stylesheet
const style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = iconFontStyles;

import { configure } from '@storybook/react';
import { addDecorator, addParameters } from '@storybook/react';
import { withContexts } from '@storybook/addon-contexts/react';
import { withTests } from '@storybook/addon-jest';
import { withKnobs } from '@storybook/addon-knobs';

import contexts from './contexts';
import viewports from './viewports';
import results from './jest-test-results.json';
import theme from './theme';
import 'index.scss';

addDecorator(withContexts(contexts));
addDecorator(withTests({ results }));
addDecorator(withKnobs);
addParameters({
  viewport: {
    viewports: viewports
  }
});
addParameters({
  options: {
    theme
  },
});

// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
  enqueue: () => {},

const clientId = '617246850621-95f9qhmehd380g2df86pjhrqc84n8nij.apps.googleusercontent.com'

const options = {
  None: null,
  Blue: 'dark'
}

// GOOGLE LOGIN BUTTON MODULE
const story = storiesOf('Google Login Button', module)

// KNOBS
story.addDecorator(withKnobs)

// JEST TEST
story.addDecorator(withTests({ results }))

// MAIN BUTTON W/ ACTION LOGGER
story.add(
  'Default Button',
  () => (
    
      {text('Button Text', '')}
    
  ),
  {

const clientId = '617246850621-95f9qhmehd380g2df86pjhrqc84n8nij.apps.googleusercontent.com';

const options= {
  None: null,
  Blue: 'dark',
};

//GOOGLE LOGOUT BUTTON MODULE
const story = storiesOf('Google Logout Button', module);

//KNOBS
story.addDecorator(withKnobs);

//JEST TEST
story.addDecorator(withTests({ results }));

//MAIN BUTTON W/ ACTION LOGGER
story.add('Default Button', () => (
    
      {text('Button Name', '')}
    
  ),
  {
    jest: ['google-logout.test.js'],
    notes: { markdown: markdownNotes }

import { getStorybook } from '@storybook/react';
import withAutoNotes from './wfp-storybook';
import { withA11y } from '@storybook/addon-a11y';

import Container from './Container';

import { withTests } from '@storybook/addon-jest';
import results from '../.jest-test-results.json';

import wfpTheme from './wfpTheme';

//require('prismjs');
//require('prismjs/themes/prism.css');

addDecorator(
  withTests({
    results,
  })
);

addDecorator(withA11y);

addParameters({
  backgrounds: [
    { name: 'WFP white (ui-01)', value: '#fbfcfc', default: true },
    { name: 'WFP background (ui-02)', value: '#eff2f5', default: true },
    { name: 'WFP brand (interactive-01)', value: '#0a6eb4' },
  ],
});

addDecorator(addReadme);