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

[code lang=text]
if (process.env.NODE_ENV !== 'test') {
addDecorator(story => (
<React.Fragment>
<GlobalStyle />
{story()}
</React.Fragment>
));
}
[/code]

を参考にした。
ラッパーを入れればいいらしい
そのラッパーはデコレーターと呼ぶらしい

公式サイト
Intro to Addons
https://storybook.js.org/docs/addons/introduction/#storybook-decorators

公式の記述の感じでdecoratorsが毎回使われるように設定を追記した。

[code lang=text]
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>],
};

…

[/code]

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

自分のにしたからデフォの設定がなくなったのか・・・
これをみて最終的にこうなった

[code lang=text]
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"]
}
};

[/code]

これでええかは知らない。resolveのあたりこれでええんか？とおもうけど、動いたのでいったんメモ。

[add 2020.0206]

画像のパスがあわない

静的においている画像をcss in jsで呼ぼうとしたらそんなの無いって怒られた

Serving Static Files
https://storybook.js.org/docs/configurations/serving-static-files/

npm scriptsに基準となるディレクトリを指定してパスをあわせる。

[code lang=text]
"storybook": "start-storybook -s ./public -p 6006",
[/code]

[//add 2020.0206]