くりーむわーかー

プログラムとか。作ってて ・試しててハマった事など。誰かのお役に立てば幸いかと。 その他、いろいろエトセトラ。。。

2018年11月

Vue CLI3+Jest+単体テスト+StoryBook+VisualTest

この前の続き。

まず、StoryBookを使えるようにする。Vueで使う場合はバージョンによって色々やり方があるっぽくて、情報が錯綜しがちで凄いハマル。今現在(2018/11/24)ではこの感じでやればいけそう。

あと、StoryBookでコンポーネント単位の確認用ページを作り、それを使ってビジュアルリグレッションテストをやれるようにする。これは公式のココに書いてあるやり方で基本はやるんだけど、Vueだと動かなかったのでちょっと変える。ついでに、Jestでコンポーネントの単体テスト出来るようにする。

今回のサンプルの最終系は下記にあげてます。作り方の全容も下記に記載してます。あー、あとCentOS7です。

https://github.com/n79s/vue-cli-storybook-sample

動かすためのポイントだけ記載。

まずVue CLI3でプロジェクト作るインストール。

vue create vue-cli-storybook-sample

#手動セッティングで作る↓
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)


#上記の構成で作った場合
#Unitテストは↓のディレクトリで作る
tests/unit/****.spec.js

#Unitテスト実行は↓
npm run test:unit

で、StoryBookは↓の感じでインストール。WebPackの設定がどうのこうのって昔はあったんだけど、今現在ではさくっと動く。

#https://storybook.js.org/basics/guide-vue/
npm install --save-dev @storybook/vue
npm install --save-dev babel-core babel-loader babel-preset-vue

#package.jsonに下記を追記
{
    .....
    "scripts": {
        "storybook": "start-storybook -p 9001 -c .storybook"
    }
    .....
}

#.storybookディレクトリを作って設定ファイルを作る
mkdir .storybook

#.storybook/config.js
import { configure } from '@storybook/vue';
import Vue from 'vue';

function loadStories() {
  require('../stories');
  const req = require.context('../stories', true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);

#storybookの実行
npm run storybook

そしたら、ビジュアルリグレッションテストできるようにする。

#必要なパッケージのインストール
npm install --save-dev jest puppeteer jest-puppeteer jest-image-snapshot start-server-and-test

#jest.config.js
module.exports = {
    moduleFileExtensions: ['js','jsx','json','vue'],
    preset: 'jest-puppeteer',
    testRegex: './*\\.test\\.js$',
    setupTestFrameworkScriptFile: './tests/setupVisualTests.js',
    transform: {
        '^.+\\.vue$': 'vue-jest',
        '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
        '^.+\\.js$': 'babel-jest',
    },
    transformIgnorePatterns: ['/node_modules/'],
};

#package.jsonに下記を追記
    .....
    "scripts": {
    "jest:visual": "jest --clearCache && vue-cli-service test:unit -c jest.config-visual.js",
    "test:visual": "start-server-and-test storybook http-get://localhost:9001 jest:visual",
    "jest:visual-update": "jest --clearCache && vue-cli-service test:unit -c jest.config-visual.js --updateSnapshot",
    "test:visual-update": "start-server-and-test storybook http-get://localhost:9001 jest:visual-update"
    }
    .....

で、はまったポイント。

まず、VueCLI3はjestを直で実行するのはサポートしてないから「vue-cli-service test:unit」を使えって、GitHubのIssueに書いてあった(どのIssueだったか見つけられなくなった・・・)。色んなサイトで見てるとだいたい「jest -c ****」みたいなコマンドでやる形になってるので、ここを「vue-cli-service test:unit -c ******」に変えないとだめ。

あと、StoryBookの公式に書いてあるjest.config.jsの記載だと動かないのと、VueCLI3で作られてるjest.config.jsでもダメだった。↓の内容にする

#jest.config.js
module.exports = {
    moduleFileExtensions: ['js','jsx','json','vue'],
    preset: 'jest-puppeteer',
    testRegex: './*\\.test\\.js$',
    setupTestFrameworkScriptFile: './tests/setupVisualTests.js',
    transform: {
        '^.+\\.vue$': 'vue-jest',
        '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
        '^.+\\.js$': 'babel-jest',
    },
    transformIgnorePatterns: ['/node_modules/'],
};

一番、はまったのが、「transform」のとこ。jsをbabel-jestでやるように記載しないとダメっぽい。VueCLI3のIssueに上がってた。ただ、まだ解決してないっぽい。何個か解決策がこのissueに書いてあるんだけど、解決するかは人(環境)によるっぽいですね。ちなみに、これをやってないとテスト実行したときに「SyntaxError: Unexpected token import」がでる。jsファイルをbabelで変換出来てないって事なんかな?あと、transformIgnorePatternsでnode_modulesを除外する設定入れておかないとダメになることもある様子。

issueに書いてある解決策はだいたい↓の感じ。

#transformは↓のどれか。js使えるようにするとの、パスがうまく出来てないかのどっちかかな
'^.+\\.js$': 'babel-jest',
'^.+\\.(js|jsx)?$': 'babel-jest'
'^.+\\.(js|jsx)?$': '<rootDir>/node_modules/babel-jest'

#transformIgnorePatternsは↓のどっちか
transformIgnorePatterns: ['/node_modules/']
transformIgnorePatterns: ['<rootDir>/node_modules/']

#あとはnode_modules一回消してnpm installし直すとか
rm -rf node_modules && npm cache clean --force && npm install

#キャッシュをクリアするとか
"test:unit": "jest --clearCache && vue-cli-service test:unit

自分は通常の単体テストとは分けてjest.config.js作って指定している。あと、jest.config.jsに「preset: 'jest-puppeteer',」入れてないと動かない。あーあと、スナップショットを更新するコマンドは「"jest:visual-update": "jest --clearCache && vue-cli-service test:unit -c jest.config-visual.js --updateSnapshot",」でやる。単体テスト側のスナップショットの更新は↓のコマンド

#単体テスト側のスナップショットの更新は↓(途中の--は間違ってるわけじゃない)
npm run test:unit -- --updateSnapshot

「--」重ねるのがはまった。

次はStoryBookのアドオンを調整するんだけど、StoryBookのReadmeではまった。「webpack.config.js」で最終的に↓の感じにする。

const path = require('path');

module.exports = (storybookBaseConfig, configType, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: [/\.stories\.js$/, /index\.js$/],
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    include: [path.resolve(__dirname, '../stories')],
    enforce: 'pre',
  });
  defaultConfig.module.rules.push({
    resourceQuery: /blockType=docs/,
    use: [
      'storybook-readme/env/vue/docs-loader',
      'html-loader',
      'markdown-loader',
    ],
  });
  return defaultConfig;
};

で、ビジュアルリグレッションできるようにしたんだけど、自分はコンポーネントはシステム本体とは別プロジェクトにしてやってる。Vuexとか絡むとロジックをかなり書かないといけないので。見た目の変更箇所だけ確認できるようにしたい。SotryBookでその辺は定義して、StoryBookのページを丸ごとGetしてやるだけにする感じ。

普通のe2eのテストでは無く、あくまでも単体テストの一環としてやる感じ。e2eのテストはSeleniumでやる。Chrome拡張で操作記録とってそのまま動かせるので。ただし、操作記録のスクリプトは長い期間保守することを考えるとさすがにイケてないので、調整は必要(要素の指定の仕方とか)。

参考サイト

storybook系
vue-test-utils系
Jest系
GitHubのサンプル
GitHubのissue

Vue CLI3でコンポーネントをnpmのモジュールにする

随分ひさしぶりに書く気がする。まーなんか寝れないので何となく書こう。

Vueでコンポートネントを色々作って行くんだけど、規模が大きくなったり、別のプロジェクトで使いたくなった場合とか、どうにか簡単にやりたい。イメージ的にはelement-ui的に、Vueプラグインとしてインストールしたらすぐ使える的な感じ。npmのモジュールとして使えるようにしたいわけです。

で、これをやるにはWebPackとかBabelとかもろもろ激しく設定しなきゃいけなさそうで、ちょっとゲンナリしてたんだけど、Vue-cli3を使うと割と簡単にできたので、そのやり方。

あと、作ったモジュールはverdaccio(なんて読むの?)を使ってプライベートリポジトリに登録して、ちんまり使うようにする。自分恥ずかしがり屋なもんで。

2019/2/27追記
verdaccio:ヴェルダッチォって発音してるっぽ。イタリア語で「緑で描く」、「黄、黒、緑の土を混ぜたもの」みたいな意味らしいけど、絵画を描くときに塗る下地?の色ってことっぽ。そんな感じのニュアンスなんでしょか。 で、これはカタカナでなんて書けばいいんだろか、ベルダッチョはカッコ悪いしの。ベルダチオでいいか。。。

今回のサンプルは下記に上げてます。

https://github.com/n79s/vue-npm-module-sample

①Vue-Cli3のインスト

npm install -g @vue/cli

②コンポーネント作るようのプロジェクトを用意

vue create my-hello-module

③コンポーネント作る

# 例えばこんな感じ。
<template>
  <section>
    <h1>Hello World !!!</h1>
    <div>Message : {{ msg }}</div>
  </section>
</template>

<script>
export default {
  name: 'HelloX',
  props: {
    msg: String
  }
}
</script>

<style scoped>
h1 {
  margin: 40px 0 0;
  color:red;
}
</style>

④公開用のindex.js

import Vue from "vue"
import HelloX from "./HelloX.vue"
import HelloY from "./HelloY.vue"
import HelloZ from "./helloz/HelloZ.vue"

const MyComponents = {
    HelloX,
    HelloY,
    HelloZ
}

Object.keys(MyComponents).forEach(name=>{
    Vue.component(name,MyComponents[name])
})

export default MyComponents

⑤ビルドの設定

# package.jsonはこんな感じに変える
・・・
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-x": "vue-cli-service build --target lib --name my-hello-module src/components/index.js",
    "lint": "vue-cli-service lint"
  },
  "main":"./lib/my-hello-module.common.js",
  "files": [
    "dist/*",
    "lib/*",
    "src/*",
    "public/*",
    "*.json",
    "*.js"
  ],
・・・

# vue.config.js(これは自分で作る

// vue.config.js
module.exports = {
    // options...
    "css":{
        "extract":false
    },
    "outputDir":"lib"
}

package.jsonの"build-x"のところでビルドのコマンド作る。あと、出力先はデフォだとdistだけど、libに変えてる。「vue.config.js」は無くても動くんだけど、細かい設定をしたい場合は必要。で、cssの部分が無いとcssが別ファイルで作成されてしまい、別プロジェクトでインストールしても、cssが適用されず上手くいかないので、上記の感じで書いておかないとダメ。CDN的に公開して、cssは別で読み込んでもらうような場合はいいのかしらね。

⑥ビルド

npm run build-x

ここまでで、libのフォルダが↓の感じになるはず。

sample05

そしたら、verdaccioの準備。

# インストール
npm install --global verdaccio

# 実行
verdaccio

これだけ。デフォで「http://localhost:4873」で動くはず。まず、ユーザ登録する。

npm adduser --registry http://localhost:4873

ID/PASS/Mail入れて終わり。あとは、下記の感じで公開する。

#package.jsonがあるディレクトリで↓を実行
cd my-hello-module
#公開
npm publish --registry http://localhost:4873
#確認
npm info my-hello-module --registry http://localhost:4873

プライベートリポジトリへの登録が終わったので別のプロジェクトを作成して↓の感じの事をやる。

#別プロジェクトを作る
vue create use-hello

#プライベートリポジトリからインストール
npm install my-hello-module --save --registry http://localhost:4873

#main.jsに↓の感じでグローバル登録する
import Vue from 'vue'
import App from './App.vue'

//↓↓↓ここ
import HelloComponents from 'my-hello-module'

Object.keys(HelloComponents).forEach(name=>{
  Vue.component(name,HelloComponents[name])
})
//↑↑↑ここ

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

グローバル登録しておけば、あとはアプリ側で↓の感じで使える。

<template>
  <div id="app">
    <HelloLocal msg="Local"/>
    <HelloX msg="use-hello X" />
    <HelloY msg="use-hello Y" />
    <HelloZ msg="use-hello Z" />
  </div>
</template>

<script>
import HelloLocal from './components/HelloLocal.vue'

export default {
  name: 'app',
  components: {
    HelloLocal
  }
}
</script>

Vue-cli3はかなりいい感じですね。すごく楽。verdaccioも素晴らしい。

あと、StoryBook使って管理してみよ。チームでの作業とか良さげ。

参考

問合せ