2018年11月くりーむわーかープログラムとか。・試しててハマった事など。誰かのお役に立てば幸いかと。その他、いろいろエトセトラ。CLI3+Jest+単体テスト+StoryBook+VisualTestこの前の続き。StoryBookを使えるようにする。Vueで使う場合はバージョンによって色々やり方があるっぽくて、情報が錯綜しがちで凄いハマル。今現在(2018/11/24)ではこの感じでやればいけそう。あと、StoryBookでコンポーネント単位の確認用ページを作り、それを使ってビジュアルリグレッションテストをやれるようにする。これは公式のココに書いてあるやり方で基本はやるんだけど、Vueだと動かなかったのでちょっと変える。ついでに、Jestでコンポーネントの単体テスト出来るようにする。今回のサンプルの最終系は下記にあげてます。作り方の全容も下記に記載してます。あー、あとCentOS7です。https://github.com/n79s/vue-cli-storybook-sample動かすためのポイントだけ記載。CLI3でプロジェクト作るインストール。test:unitで、StoryBookは↓の感じでインストール。WebPackの設定がどうのこうのって昔はあったんだけど、今現在ではさくっと動く。storybookそしたら、ビジュアルリグレッションテストできるようにする。.....で、はまったポイント。test:unit」を使えって、GitHubのIssueに書いてあった(どのIssueだったか見つけられなくなった・・・)。******」に変えないとだめ。あと、StoryBookの公式に書いてあるjest.config.jsの記載だと動かないのと、VueCLI3で作られてるjest.config.jsでもダメだった。['/node_modules/'],};一番、はまったのが、「transform」のとこ。jsをbabel-jestでやるように記載しないとダメっぽい。VueCLI3のIssueに上がってた。何個か解決策がこのissueに書いてあるんだけど、解決するかは人(環境)によるっぽいですね。import」がでる。jsファイルをbabelで変換出来てないって事なんかな?あと、transformIgnorePatternsでnode_modulesを除外する設定入れておかないとダメになることもある様子。issueに書いてある解決策はだいたい↓の感じ。#transformは↓のどれか。test:unit自分は通常の単体テストとは分けてjest.config.js作って指定している。'jest-puppeteer',」入れてないと動かない。--updateSnapshot",」でやる。--updateSnapshot「--」重ねるのがはまった。次はStoryBookのアドオンを調整するんだけど、StoryBookのReadmeではまった。「webpack.config.js」で最終的に↓の感じにする。defaultConfig;};で、ビジュアルリグレッションできるようにしたんだけど、自分はコンポーネントはシステム本体とは別プロジェクトにしてやってる。Vuexとか絡むとロジックをかなり書かないといけないので。見た目の変更箇所だけ確認できるようにしたい。SotryBookでその辺は定義して、StoryBookのページを丸ごとGetしてやるだけにする感じ。普通のe2eのテストでは無く、あくまでも単体テストの一環としてやる感じ。e2eのテストはSeleniumでやる。Chrome拡張で操作記録とってそのまま動かせるので。操作記録のスクリプトは長い期間保守することを考えるとさすがにイケてないので、調整は必要(要素の指定の仕方とか)。CLI3でコンポーネントをnpmのモジュールにする随分ひさしぶりに書く気がする。まーなんか寝れないので何となく書こう。Vueでコンポートネントを色々作って行くんだけど、規模が大きくなったり、別のプロジェクトで使いたくなった場合とか、どうにか簡単にやりたい。イメージ的にはelement-ui的に、Vueプラグインとしてインストールしたらすぐ使える的な感じ。npmのモジュールとして使えるようにしたいわけです。これをやるにはWebPackとかBabelとかもろもろ激しく設定しなきゃいけなさそうで、ちょっとゲンナリしてたんだけど、Vue-cli3を使うと割と簡単にできたので、そのやり方。あと、作ったモジュールはverdaccio(なんて読むの?)を使ってプライベートリポジトリに登録して、ちんまり使うようにする。自分恥ずかしがり屋なもんで。2019/2/27追記verdaccio:ヴェルダッチォって発音してるっぽ。イタリア語で「緑で描く」、「黄、黒、緑の土を混ぜたもの」みたいな意味らしいけど、絵画を描くときに塗る下地?の色ってことっぽ。そんな感じのニュアンスなんでしょか。これはカタカナでなんて書けばいいんだろか、ベルダッチョはカッコ悪いしの。今回のサンプルは下記に上げてます。"outputDir":"lib"}package.jsonの"build-x"のところでビルドのコマンド作る。あと、出力先はデフォだとdistだけど、libに変えてる。「vue.config.js」は無くても動くんだけど、細かい設定をしたい場合は必要。cssの部分が無いとcssが別ファイルで作成されてしまい、別プロジェクトでインストールしても、cssが適用されず上手くいかないので、上記の感じで書いておかないとダメ。CDN的に公開して、cssは別で読み込んでもらうような場合はいいのかしらね。build-xここまでで、libのフォルダが↓の感じになるはず。したら、verdaccioの準備。実行verdaccioこれだけ。デフォで「http://localhost:4873」で動くはず。http://localhost:4873ID/PASS/Mail入れて終わり。あとは、下記の感じで公開する。http://localhost:4873プライベートリポジトリへの登録が終わったので別のプロジェクトを作成して↓の感じの事をやる。h(App),}).$mount('#app')グローバル登録しておけば、あとはアプリ側で↓の感じで使える。}}</script>Vue-cli3はかなりいい感じですね。verdaccioも素晴らしい。あと、StoryBook使って管理してみよ。チームでの作業とか良さげ。