Storybook LaunchDarkly 插件

在您的 Storybook stories 中使用 LaunchDarkly。

免责声明

这不是 Storybook 官方插件。我之所以制作它，是因为 LD 多年来一直没有官方插件 https://github.com/launchdarkly/react-client-sdk/issues/30。

我无法积极处理不属于我使用场景的问题。并且我也不会，因为 LD 官方人员不会提供 帮助。

安装

yarn

yarn add --dev storybook-addon-launchdarkly

npm

npm install -D storybook-addon-launchdarkly

将此插件添加到您的配置中，位置在 .storybook/main.js

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

使用 flags 编写 stories

import Example from '.';

const meta = {
  component: Example,
} satisfies Meta<typeof Example>;
export default meta;

export const Default: StoryObj<typeof meta> = {
  parameters: {
    launchdarkly: {
      flags: {
        testFlag: true,
      },
    },
  },
};

使用 flagged stories 编写测试

因为 composeStory 不处理插件，您需要进行设置。请查看 此评论 作为参考。

// setupFile.js
import { setProjectAnnotations } from '@storybook/react';
import globalConfig from '../.storybook/preview';
import addonLaunchdarklyConfig from 'storybook-addon-launchdarkly/preview';

setProjectAnnotations({
  ...globalConfig,
  decorators: [
    ...globalConfig.decorators,
    // not loaded automatically in preset, must add this manually for @storybook/testing-react to pick it up
    ...addonLaunchdarklyConfig.decorators,
  ],
});

// Example.test.tsx
import { composeStories } from '@storybook/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();
  });
});

StoryBook 示例

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