【React】StoryBookを使ってみた

Next.jsのプロジェクトにStoryBookを入れて少し動かしてみました。

インストール

npx sb init

起動

npm run storybook

トラブルシューティング

TypeError: this.getOptions is not a function

sass-loaderのバージョンを10系にする事で解決しました。

npm install --save-dev sass-loader@^10.2.0

TypeError: Cannot read property 'createSnapshot’ of undefined

html-webpack-pluginをインストールする事で解決しました。

npm install --save-dev html-webpack-plugin

SCSSのファイルをインポートしているとエラーになる

.storybook/main.jsに以下を追記します。

webpackFinal: async (baseConfig) => {
  baseConfig.module.rules.push({
    test: /\.scss$/,
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: {
          importLoaders: 1,
          modules: {
            localIdentName: "[local]___[hash:base64:2]",
          },
        },
      },
      "sass-loader",
    ],
  });
  return { ...baseConfig };
},

Next.jsのRouter関連のエラー①（Cannot read property 'pathname’ of null）

Next.jsのRouter関連のエラー②（Cannot read property 'prefetch’ of null）

storybook-addon-next-routerをインストールする事で解決しました。

npm install --save-dev storybook-addon-next-router

.storybook/main.jsに以下を追記します。 

import { RouterContext } from "next/dist/shared/lib/router-context";

export const parameters = {
  nextRouter: {
    Provider: RouterContext.Provider,
    pathname: '/',
    asPath: '/',
    query: {},
    push() {
    }
  }
}

サンプル

【以下のサンプルを読むための前提】
・自作のHeaderコンポーネントのサンプルです。
・Header内でルートパスとそれ以外で動きが変わるため、「pathname: “/a"」でRouterを上書きしています。
・Header内でuseCotextを使用しています。

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import Header from './Header';
import { SearchProvider } from '../context/SearchContext'

export default {
  title: 'Header',
  component: Header,
} as ComponentMeta<typeof Header>;

export const Home1: ComponentStory<typeof Header> = () => {
  return (
    <SearchProvider>
      <Header title="title A" />
    </SearchProvider>
  );
};

export const Home2: ComponentStory<typeof Header> = () => {
  return (
    <SearchProvider>
      <Header title="title B" />
    </SearchProvider>
  );
};

Home2.story = {
  parameters: {
    nextRouter: {
      pathname: "/a",
    },
  },
};

export const Home3: ComponentStory<typeof Header> = (args1) => {
  return (
    <SearchProvider>
      <Header {...args1} />
    </SearchProvider>
  );
};

Home3.args = {
  title: "title C"
};

未分類

Posted by ababa