Chakra UIのカラーモードをChromaticでヴィジュアルテストする

Oct 15, 2024

kaori

---

Chakra UI のカラーモードを Storybook と Chromatic でテストする場合に、設定が必要でした。 各バージョンはこれです。

• storybook@8.3.5
• @chakra-ui/react@2.10.2
• chromatic@11.12.5

Storybook 上で Chakra UI のカラーモードを On/Off する

Chakra UI のカラーモードは Chakra UI が提供している Color Mode 機能を使って変更します。　使用中のバージョンでは Storybook の背景変更でうまくうごかないので、preview.ts に設定を追加します。この Issueを参考にしました。

.storybook/preview.ts

interface ColorModeProps {
  colorMode: 'light' | 'dark';
  children: JSX.Element;
}

function ColorMode(props: ColorModeProps) {
  const { setColorMode } = useColorMode();

  useEffect(() => {
    setColorMode(props.colorMode);
  }, [props.colorMode]);

  return props.children;
}

export const decorators = [
  (Story, context) => {
    return (
      <ChakraProvider>
        <ColorMode colorMode={context.globals.colorMode}>
          <Story />
        </ColorMode>
      </ChakraProvider>
    );
  },
];

export const globalTypes = {
  colorMode: {
    name: 'Color Mode',
    defaultValue: 'light',
    toolbar: {
      items: [
        { title: 'Light', value: 'light' },
        { title: 'Dark', value: 'dark' },
      ],
      dynamicTitle: true,
    },
  },
};

この設定を追加することで、Storybook のメニューにカラーモードを変更できるボタンが追加されます。 このボタンで Chakra UI のカラーモードが変更されるので、期待している動作ができるはずです！

Chromatic で各カラーモードのスナップショットを作成する

次は、Chromatic 上の設定を追加します。

.storybook/modes.ts

export const allModes = {
  light: {
    colorMode: "light"
  },
  dark: {
    colorMode: "dark"
  },
};

モードごとにスナップショットを作成したい Story に設定を追加します。

export const Default = {
  parameters: {
    chromatic: {
      modes: {
        light: allModes['light'],
        dark: allModes['dark'],
      },
    },
  },
  ...
};

Chromatic では自動で設定したモード分のスナップショットが作成されます。カラーモードも反映されています。