webpack-dev-serverで継続的なクライアントサイドテスト

webpackのTestingを眺めてたら、 ブラウザ上でアプリを動作させながらMochaのSpecを走らせて、 クライアントサイドのテストをする、 みたいなことが手軽に出来そうだったので、やってみた。

webpack-dev-serverを利用すれば、 ソースやテストを修正直後に自動リロードされるので、 継続的テストみたいな手法もとりやすい。

ScreenShot

動作サンプル

ひと通り動くサンプルを作ったので、以下のGitHubに上げておきます。 nodeやnpmがインストールされていれば、動作すると思われます。

“Greetingボタンを押したら、その下に挨拶が追加される”
みたいな動作のサンプルアプリとそのSpecをjQueryでシンプルに組んであります。

GitHub: sample-webpack-test
https://github.com/namikingsoft/sample-webpack-test

試しにブラウザで動かしてみる

GitHub上の動作サンプルをcloneして、 webpack-dev-serverを起動したら、 お使いのブラウザから以下のURLにアクセスすることで動作を確認できる。

http://localhost:8080/webpack-dev-server/

コマンド例

git clone https://github.com/namikingsoft/sample-webpack-test
cd sample-webpack-test
npm install && npm start
open http://localhost:8080/webpack-dev-server/

動作画面の例

フロントエンドアプリとMochaのSpecを同時に動かしている図。 Seleniumみたいにギュンギュン動いて楽しい。 Mochaのテスト中にに割り込んでワザとテストを失敗させたりできる。

Animation

Specは走らなくていいから、 アプリの動作確認だけしたいときは以下のURL1で可能。 http://localhost:8081/webpack-dev-server/app

ざっくり解説

ファイル構成

sample-webpack-test
|-- build
|   |-- app.js # webpackが吐き出したアプリ本体のバンドルJS
|   |-- index.html # アプリとSpecを動作させるHTML
|   `-- spec.js # webpackが吐き出したSpecのバンドルJS
|-- spec # このディレクトリ以下に置いた*Spec.jsが実行される
|   `-- mainSpec.js
|-- src
|   `-- main.js # アプリ本体のソース
`-- webpack.config.js # webpackの設定ファイル

buildディレクトリ内のapp.jsspec.jsは、 webpack-dev-server内の動作であれば、 メモリ内のものが呼び出されるようなので、特に設置する必要はなさそう。

複数のSpecファイルに対応する

npmのglobモジュールを利用して、 複数のSpecファイルをエントリーポイントに含めることができる。 また、requireでglobを書きたい場合は、glob-loaderを使えば、同じようなことができる。

// webpack.config.jsのmodule.exports内

entry: {
  app: "./src/main.js",
  spec: glob.sync("./spec/**/*Spec.js"),
}

修正後に自動的にテストが走るようにする

webpack-dev-serverには、ファイル修正を検知して再読み込みをしてくれる、 hotモードという機能が付いているので、webpack.config.jsでそれをを有効にする。

// webpack.config.jsのmodule.exports内

devServer: {
  // Document Root
  contentBase: "./build",
  // 動作ポート指定
  port: 8080,
  // hotモード有効化
  hot: true,
  // これがないと、ブラウザで
  inline: true,
},
plugins: [
  // hotモードに必要なプラグイン
  new webpack.HotModuleReplacementPlugin(),
],

Specファイルをブラウザで動作するように変換する

webpackのTestingのページにもあるが、 mocha-loaderを噛ますことで、ブラウザでMochaが利用可能になるJSが吐き出せるようになる。

SpecファイルをES6で書きたければ、 babel-loaderを挟むと、一般ブラウザ用のJSに変換できる。 CoffeeScript+Chaiとかで書いても気持ちよさそう。

// webpack.config.jsのmodule.exports内

module: {
  loaders: [
    // App用
    {
      test: /\.js$/,
      loaders: ['babel'],
      exclude: /(node_modules|bower_components)/,
    },
    // Spec用
    {
      test: /Spec\.js$/,
      loaders: ['mocha', 'babel'],
      exclude: /(node_modules|bower_components)/,
    },
  ],
},

AppとSpecを同時に走らせるHTMLを用意

アプリの動作画面にSpec結果のレイアウトを入れ込む。
app.jsで必要なUIを書き出すなどの初期処理を行ってから、spec.jsを走らせている。

<!-- build/index.html -->

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>App</title>
    <style>
      /* Spec実行結果を表示するレイアウトCSS */
      .layout-spec {
        position: fixed;
        overflow: scroll;
        top: 0; bottom: 0; right: 0;
        width: 45%;
        background-color: #eee;
      }
      .layout-spec pre {
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <!-- App実行 -->
    <script src="app.js"></script>
    <div class="layout-spec">
      <!-- Spec実行 -->
      <script src="spec.js"></script>
    </div>
  </body>
</html>

あとがき

ChromeとかFirefoxなどの複数のブラウザ上で手軽にフロント動作仕様を自動チェックしたい、 みたいなときの方法論の一つとして紹介してみた。

ただ、CLI動作とかCIと連携する場合は、 Kermaのようなテストランナーを使ったほうが良いかも。 webpackはKermaとも簡単に連動できるようなので、 その辺も後々まとめておきたい。


  1. URLのappの部分はバンドルJS出力先のパスを指定すれば、webpack-dev-serverが出力用HTMLを自動生成してくれるみたい。(.jsは省略してます) [return]
comments powered by Disqus

この記事について

書いた人
Written by

namikingsoft

何かを残して逝きたい
フロントエンドエンジニア