StorybookでReact Routerのコンポーネントを取り扱う時の覚書

Storybook – UI dev environment you’ll love to use便利ですよね。
チーム開発するときに、「どのタグがどういう表示になるか」を簡単にプレビューできるので、積極的に使いたいツールの１つです。

ただ、Linkタグを使っているコンポーネントをドキュメントにしたいときもあったりしますが、そのまま書くとエラーになります。

サンプルコード

/* eslint-disable import/no-extraneous-dependencies, react/jsx-filename-extension */
import React from 'react';
import { storiesOf } from '@storybook/react';
import Header from '../Header';

storiesOf('Layouts', module)
  .addWithInfo(
    'Header',
    'This is the general header component.',
    () => (
      <Header />
    ),
    { inline: true },
  );

実行結果

対策：MemoryRouterの子要素として配置する

ユニットテストの時の案内に書かれてる対策と同じですが、MemoryRouterの子要素にすることでエラーを回避できます。

/* eslint-disable import/no-extraneous-dependencies, react/jsx-filename-extension */
import React from 'react';
import { storiesOf } from '@storybook/react';
import { MemoryRouter as Router } from 'react-router-dom';
import Header from '../Header';

storiesOf('Layouts', module)
  .addWithInfo(
    'Header',
    'This is the general header component.',
    () => (
      <Router>
        <Header />
      </Router>
    ),
    { inline: true },
  );