ReactのUI見本帳、testerとしてStorybookを使ってみている
つまづきのめも
ほぼすべてのブログ記事が古い
現状バージョンで記事書いている人いない
それだけ昔から使われているのか、メジャーバージョンアップがおおいのか、もはや誰も使っていないのか・・・
themeやグローバルのcssが読み込まれない
なんじゃこら
コンポーネントごとなので、上位階層で指定していた上記が読み込まれない。
そうか・・・
config.jsでcssを読み込む記述しか見当たらない・・・ので
この記事で書いていた
Storybook による UI & Unit Testing のススメ – Mercari Engineering Blog
https://tech.mercari.com/entry/2018/12/19/123834
if (process.env.NODE_ENV !== 'test') { addDecorator(story => ( <React.Fragment> <GlobalStyle /> {story()} </React.Fragment> )); }
を参考にした。
ラッパーを入れればいいらしい
そのラッパーはデコレーターと呼ぶらしい
公式サイト
Intro to Addons
https://storybook.js.org/docs/addons/introduction/#storybook-decorators
公式の記述の感じでdecoratorsが毎回使われるように設定を追記した。
import Layout from '../../containers/LayoutForStory'; import SimpleTable from './Table'; export default { component: SimpleTable, title: 'SimpleTable', // Our exports that end in "Data" are not stories. excludeStories: /.*Data$/, decorators: [storyFn => <Layout>{storyFn()}</Layout>], }; ...
classじゃなくてclassNameだよと怒られる
webアプリ本体ではbabel-plugin-react-html-attrsを使っているのだけど、それをStorybookは知らないからめっちゃおこってくる
Storybook v5 を TypeScript × React 環境に導入する | blog.kwst.site
https://blog.kwst.site/201907293042/
このなかの記述のようにwebpackでbabelの設定すれば良さそう
とおもって、
.storybook/webpack.config.js
をつくってbabelのことだけ追加して配置したらこんどはcssの記述がキモいって怒り出した。
Can’t import css · Issue #1603 · storybookjs/storybook
https://github.com/storybookjs/storybook/issues/1603
自分のにしたからデフォの設定がなくなったのか・・・
これをみて最終的にこうなった
var webpack = require('webpack'); var path = require('path'); const includePath = path.resolve(__dirname, '..'); module.exports = { module: { rules: [{ test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, use: [{ loader: 'babel-loader', options: { plugins: [ 'react-html-attrs', 'babel-plugin-styled-components', [require('@babel/plugin-proposal-decorators'), {legacy: true}] ], presets: ['@babel/preset-react', '@babel/preset-env'] } }] }, { test: /\.css$/, include: includePath, use: [ { loader: 'style-loader', }, { loader: 'css-loader', options: { sourceMap: true, }, }, ], }, { test: /\.(woff|woff2|eot|ttf|svg)$/, include: includePath, use: 'url-loader' } ] }, resolve: { extensions: [".ts", ".tsx", ".js", ".json"] } };
これでええかは知らない。resolveのあたりこれでええんか?とおもうけど、動いたのでいったんメモ。
[add 2020.0206]
画像のパスがあわない
静的においている画像をcss in jsで呼ぼうとしたらそんなの無いって怒られた
Serving Static Files
https://storybook.js.org/docs/configurations/serving-static-files/
npm scriptsに基準となるディレクトリを指定してパスをあわせる。
"storybook": "start-storybook -s ./public -p 6006",
[//add 2020.0206]