Spring Boot + npm + Geb で入力フォームを作ってテストする ( その６６ )( Node.js を 8.9.4 → 8.11.3 へ、npm を 5.6.0 → 6.2.0 へ＋ Javascript のライブラリをバージョンアップする )

概要

記事一覧はこちらです。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その６５ )( Gradle を 4.6 → 4.8.1 へ、Checkstyle を 8.8 → 8.11 へ、PMD を 6.4.0 → 6.5.0 へ、error-prone を 2.2.0 → 2.3.1 へバージョンアップする ) の続きです。

• 今回の手順で確認できるのは以下の内容です。
  • Javascript 側のライブラリ／モジュールをバージョンアップします。Node.js や npm も最新版にバージョンアップします。

参照したサイト・書籍

• nodist では、まだ npm@6.0.0 がインストールできない（2018年5月4日からインストールできます）
  https://qiita.com/horihiro/items/b26463364c59df8d210f

• package.json のチルダ(~) とキャレット(^)
  https://qiita.com/sotarok/items/4ebd4cfedab186355867

• Viewing All Versions of an NPM Package (Including Pre-Release)
  https://willi.am/blog/2015/07/17/viewing-all-versions-of-an-npm-package-including-pre-release/

• Jest 23: 🔥 Blazing Fast Delightful Testing
  https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing

目次

1. Node.js を 8.9.4 → 8.11.3 へ、npm を 5.5.1 → 6.2.0 へバージョンアップする
2. モジュールを最新版にバージョンアップする
3. eslint-config-airbnb-base を 12.1.0 → 13.0.0 へ、eslint を 4.18.1 → 4.19.1 へバージョンアップする
4. windows-build-tools を 2.2.1 → 3.0.1 へ、jest を 22.4.2 → 23.4.1 へバージョンアップする

手順

Node.js を 8.9.4 → 8.11.3 へ、npm を 5.5.1 → 6.2.0 へバージョンアップする

https://nodejs.org/ja/ を見ると推奨版は 8.11.3 LTS でした。

nodist dist コマンドを実行して 8.11.3 がインストール可能か確認します。

8.11.3 が表示されていますので、8.11.3 へバージョンアップします。

npm も最新版にバージョンアップします。npm の最新バージョンは https://docs.npmjs.com/ の一番下を見ると 6.2.0 とありましたので、

6.2.0 にバージョンアップします。。。と思いましたが、Cannot read property 'trim' of null. というメッセージが出てバージョンアップできませんでした。

調べると nodist では、まだ npm@6.0.0 がインストールできない（2018年5月4日からインストールできます） という記事を見つけました。なるほど、https://github.com/npm/npm/releases のページの文字列を指定しないといけないのか。。。　最新版だと 6.2.0-next.1 でした。

バージョン番号を 6.2.0-next.1 にすると、今度は無事バージョンアップできました。

モジュールを最新版にバージョンアップする

バージョンアップ可能なモジュールを確認します。IntelliJ IDEA のメインメニューから「File」-「Settings...」を選択して「Settings」ダイアログを開き、画面左側で「Language & Frameworks」-「Node.js and NPM」を選択します。

画面右側にモジュールの一覧と現行バージョン、最新バージョン一覧が表示されます。

今回モジュール一覧には以下のように表示されました。

今回は以下の方針でバージョンアップします。

• admin-lte、bootstrap、ionicons は現行のまま。
• postcss-cli、xhr-mock は 以前 正常にバージョンアップできなかったので今回もバージョンしない。
• mobx、mobx-utils は少し触ってみただけなのでバージョンアップしない。
• バージョンアップは npm update ではなく npm install --save-dev autoprefixer@8.0.0（package.json の dependencies に記載されているものは --save、devDependencies に記載されているものは --save-dev にする） のようにバージョンを指定しながらバージョンアップする。
• １つずつ上からバージョンアップする。関連しそうなところを動作確認しながら進める。
• eslint、jest + widows-build-tools は別に章を分けてバージョンアップする。

特に問題がでなければ画面キャプチャは撮りません。

• npm install --save-dev autoprefixer@8.6.5
• npm install --save-dev browser-sync@2.24.5
• npm install --save computed-async-mobx@4.1.0
• npm install --save-dev cssnano@4.0.2
• npm install --save-dev http-proxy-middleware@0.18.0
• npm install --save-dev jquery-mockjax@2.4.0
• npm install --save-dev nock@9.4.2
• npm install --save-dev npm-run-all@4.1.3
• npm install --save-dev stylelint@9.3.0
• npm install --save-dev stylelint-config-standard@18.2.0
• npm install --save-dev uglifyjs-webpack-plugin@1.2.7
• npm install --save-dev webpack@4.16.0
• npm install --save-dev webpack-cli@3.0.8
• npm install --save-dev xhr-mock@2.4.1

コマンドラインから npm test コマンドを実行すると、テストは全て成功しました。

npm run build コマンドも特にエラーは出ずに終了しました。

IntelliJ IDEA から Tomcat を起動して npm run springboot で browser-sync を起動して動作確認しても問題ありませんでした（画面キャプチャなし）。

eslint-config-airbnb-base を 12.1.0 → 13.0.0 へ、eslint を 4.18.1 → 4.19.1 へバージョンアップする

以下のコマンドを実行します。

• npm install --save-dev eslint-config-airbnb-base@13.0.0

eslint-config-airbnb-base@13.0.0 は eslint@^4.19.1、eslint-plugin-import@^2.12.0 が必要のようです。

npm show eslint@* version コマンドでインストール可能なバージョン一覧を確認します。メジャーバージョン番号が 4 だと 4.19.1 が最新でした。

npm show eslint-plugin-import@* version コマンドでインストール可能なバージョン一覧を確認します。メジャーバージョン番号が 2 だと 2.13.0 が最新でした。

以下のコマンドを実行して eslint-config-airbnb-base に対応する eslint、eslint-plugin-import の最新バージョンにバージョンアップします。

• npm install --save-dev eslint@4.19.1
• npm install --save-dev eslint-plugin-import@2.13.0

npm run build コマンドを実行してみると、特にエラーは出ずに終了しました。

windows-build-tools を 2.2.1 → 3.0.1 へ、jest を 22.4.2 → 23.4.1 へバージョンアップする

コマンドプロンプトを「管理者として実行...」で起動した後、npm install --global --production windows-build-tools@3.0.1 を実行します。

All done! のメッセージが出た後、いつまで経っても終わらないので Ctrl+C を押して強制終了した後、タスクマネージャから BuildTools_Full のプロセスを落としました。windows-build-tools はインストールの動作がおかしかったのでいろいろ試したのですが、何をやってもコマンドプロンプトに戻ってこなくて、今回きちんとインストールできているのか良く分からないんですよね。。。　どうしようもなかったので先に進めることにします。

次に普通に起動したコマンドプロンプトで npm install --save-dev jest@23.4.1 を実行します。

npm install --save-dev jest-html-reporter@2.4.1 も実行します。

npm WARN jest-html-reporter@2.0.0 requires a peer of jest@19.x - 22.x but none is installed. のメッセージが出ていますが、実際には Jest 23 でも動作するので無視します。

npm test コマンドを実行するとテストは全て成功し、

build/reports/jest/jest-html-reporter.html も問題なく生成されていました。

Jest 23: 🔥 Blazing Fast Delightful Testing を見ましたが、Spock みたいな Parameterized Test が書ける Jest Each という機能が追加されていました。データを記述するテーブルレイアウトが少し独特ですが、Prettier を入れれば綺麗にフォーマットしてくれるらしいです。

次は Java のモジュールのバージョンアップの予定でしたが、先に Jest Each を試してみます。欲しかった機能なんですよね。期待大です。

履歴

2018/07/15
初版発行。