react-routerを使ったコンポーネントをStorybook v5.3で追加する場合

Invariant failed: You should not use <Link> outside a <Router>というエラー

<Link to={path}> を含んでいるコンポーネントをStorybookに追加すると以下のようなエラーが出ます。

Invariant failed: You should not use <Link> outside a <Router>
Error: Invariant failed: You should not use <Link> outside a <Router>
    at invariant (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:133623:11)
    at http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:124464:86
    at updateContextConsumer (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:115964:19)
    at beginWork$1 (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:116347:14)
    at HTMLUnknownElement.callCallback (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:96456:14)
    at Object.invokeGuardedCallbackDev (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:96505:16)
    at invokeGuardedCallback (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:96560:31)
    at beginWork$$1 (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:121900:7)
    at performUnitOfWork (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:120815:12)
    at workLoopSync (http://localhost:9009/vendors~main.1df07f438181f

そこで役に立つのが、 storybook-react-router というモジュールです。 StorybookのDecoratorに追加するだけで、上記のエラーが解消されます。

https://www.npmjs.com/package/storybook-react-router

storyに追加する方法

1
2
3
4
5
6
7
8
9
10

import { storiesOf } from '@storybook/react';
import StoryRouter from 'storybook-react-router';
 
import ComponentParams from '<your_component_path>/ComponentParams';
 
storiesOf('Params', module)
  .addDecorator(StoryRouter())
  .add('params', () => (
    <ComponentParams/>
  ));

config.jsに追加する方法

1
2
3
4
5
6
7

import { configure, addDecorator } from '@storybook/react';
import StoryRouter from 'storybook-react-router';
 
addDecorator(StoryRouter());
 
// ...your config
 

Storybook v5.3 で追加する場合

どうやら、上記の記述はStorybook v5.2以下の記述方法みたいで、 現時点での最新、v5.3 からは新しい書き方がドキュメントに書かれています。 ※推奨も非推奨も書いてなく、v5.3でも storiesOf config.js も動きます。

https://storybook.js.org/docs/formats/storiesof-api/

storiesOf is Storybook’s API for adding stories. Up until Storybook 5.2, it has been the primary way to create stories in Storybook.
In Storybook 5.2 we introduced a simpler and more portable Component Story Format, and all future tools and infrastructure will be oriented towards CSF. Therefore, we recommend migrating your stories out of storiesOf API, and even provide automated tools to do this.
That said, the storiesOf API is not deprecated. For the time being most existing Storybooks use the storiesOf API, and therefore we plan to support it for the foreseeable future.

Google翻訳してみると

storiesOfは、ストーリーを追加するためのStorybookのAPIです。 Storybook 5.2までは、Storybookでストーリーを作成する主な方法でした。 Storybook 5.2では、よりシンプルで移植性の高いComponent Story Formatを導入し、将来のすべてのツールとインフラストラクチャはCSF向けになります。そのため、storiesOf APIからストーリーを移行することをお勧めします。これを行うための自動化ツールも提供します。 ただし、storiesOf APIは非推奨ではありません。当分の間、ほとんどの既存のStorybookはstoriesOf APIを使用するため、当面の間はそれをサポートする予定です。

https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#to-mainjs-configuration

ここにも、 config.js から preview.js に変更になった内容が書かれています。

storybook-react-router を Storybook v5.3で追加する方法です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import React from 'react';
import StoryRouter from 'storybook-react-router';

import ComponentParams from '<your_component_path>/ComponentParams';

export default {
  component: ComponentParams,
  title: 'Components',
  decorators: [StoryRouter()],
  excludeStories: /.*Data$/
};

export const Component = () => {
  return <ComponentParams />;
}