New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,351
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Launchdarkly
Use Launchdarkly in your Storybook stories.
npm install storybook-addon-launchdarkly
Last updated 10 months ago
4.9k
Downloads per week
Readme View on GitHub

Storybook Addon LaunchDarkly

current version

Use LaunchDarkly in your Storybook stories.

Install

yarn

yarn add --dev storybook-addon-launchdarkly

npm

npm install -D storybook-addon-launchdarkly

Add the addon to your configuration in .storybook/main.js

module.exports = {
  ...config,
  addons: [
    ...your addons
    "storybook-addon-launchdarkly",
  ],
};

Writing your stories with flags

import Example from '.';

export default {
  component: Example,
} as ComponentMeta<typeof Example>;

export const Default: StoryObj = {
  parameters: {
    launchdarkly: {
      flags: {
        testFlag: true,
      },
    },
  },
};

Writing your test with flagged stories

Because composeStory dosen't handdle addons, you need to setup. check this comment for referrence.

// setupFile.js
import { setGlobalConfig } from '@storybook/testing-react';
import * as globalConfig from '../.storybook/preview';
import { decorators } from 'storybook-addon-launchdarkly';

setGlobalConfig({
  ...globalConfig,
  decorators: [
    ...globalConfig.decorators,
    // not loaded automatically in preset, must add this manually for @storybook/testing-react to pick it up
    ...decorators,
  ],
});
// Example.test.tsx
import { composeStories } from '@storybook/testing-react';
import { render, screen } from '@testing-library/react';
import * as stories from './Example.stories';

describe('Example', () => {
  const { True, False } = composeStories(stories);

  test('flag shoud be True', async () => {
    render(<True {...True.args} />);

    expect(screen.queryByText('True')).not.toBeNull();
    expect(screen.queryByText('False')).toBeNull();
  });

  test('flag shoud be False', async () => {
    render(<False {...False.args} />);

    expect(screen.queryByText('True')).toBeNull();
    expect(screen.queryByText('False')).not.toBeNull();
  });
});

Example StoryBook

https://kodai3.github.io/storybook-addon-launchdarkly

Join the community
5,861 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI