Spring Boot + npm + Geb で入力フォームを作ってテストする ( その８０ )( nodist を 0.8.8 → 0.9.1 へ、Node.js を 8.11.4 → 10.15.3 へ、npm を 6.2.0-next.1 → 6.9.0 へバージョンアップする )

概要

記事一覧はこちらです。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その７９ )( webdriver-binaries-gradle-plugin を利用して WebDriver を個別にダウンロード不要にする ) の続きです。

• 今回の手順で確認できるのは以下の内容です。
  • nodist を 0.8.8 → 0.9.1 へ、Node.js を 8.11.4 → 10.15.3 へ、npm を 6.2.0-next.1 → 6.9.0 へバージョンアップします。
  • また npm でインストールしているモジュールを一部を除き最新のバージョンにします。

参照したサイト・書籍

1. nullivex/nodist
   https://github.com/nullivex/nodist

目次

1. まずは現在の状況を確認する
2. nodist を 0.8.8 → 0.9.1 へバージョンアップする
3. Node.js を 10.15.3 へ、npm を 6.9.0 へバージョンアップする
4. モジュールを最新のバージョンにする

手順

まずは現在の状況を確認する

現在のバージョンは nodist が 0.8.8、Node.js が 8.11.4、npm が 6.2.0-next.1 です。

nodist を 0.8.8 → 0.9.1 へバージョンアップする

https://github.com/nullivex/nodist/releases から NodistSetup-v0.9.1.exe をダウンロードし、実行します。

1. 「Welcome to Nodist Setup」画面が表示されます。「Next >」ボタンをクリックします。
2. 「License Agreement」画面が表示されます。「I Agree」ボタンをクリックします。
3. 「Choose Install Location」画面が表示されます。「Destination Folder」に 0.8.8 をインストールした時の D:\Nodist\ が表示されているので、そのまま「Install」ボタンをクリックします。
4. 「Installing」画面が表示されてインストールが実行されます。
5. 「Completing Nodist Setup」画面が表示されます。「Finish」ボタンをクリックします。

インストールが完了すると nodist が 0.9.1 になりますが、Node.js も 11.13.0 になりました。npm は前と変わらず 6.2.0-next.1 のままでした。

Node.js を 10.15.3 へ、npm を 6.9.0 へバージョンアップする

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

Node.js は nodist をバージョンアップした時に 11.13.0 になっていますので 10.15.3 へバージョンダウンします。

npm の最新バージョンは https://github.com/npm/cli/releases を見ると 6.9.0 でした。

6.9.0 にバージョンアップします。

モジュールを最新のバージョンにする

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

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

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

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

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

• npm install --save-dev autoprefixer@9.5.1
• npm install --save-dev browser-sync@2.26.3
• npm install --save-dev cssnano@4.1.10
• npm install --save-dev http-proxy-middleware@0.19.1
• npm install --save jquery@3.4.0
• npm install --save-dev jquery-mockjax@2.5.0
• npm install --save-dev nock@10.0.6
• npm install --save-dev npm-run-all@4.1.5
• npm install --save-dev prettier@1.16.4
• npm install --save-dev prettier-webpack-plugin@1.2.0
• npm install --save-dev rimraf@2.6.3
• npm install --save-dev stylelint@9.10.1
• npm install --save-dev uglifyjs-webpack-plugin@2.1.2
• npm install --save-dev webpack@4.29.6
• npm install --save-dev webpack-cli@3.3.0
• npm install --save-dev xhr-mock@2.4.1

コマンドラインから npm test コマンドを実行すると、かなりのテストが失敗しました。

（.....途中省略.....）

実際に失敗したのは以下のテストで（IntelliJ IDEA から Jest のテストを実行しています）、xhr-mock が原因でした。

失敗しているテストを以下のように修正します。

• xhrmock.setup(); → xhrmock.default.setup(); に変更します。
• xhrmock.teardown(); → xhrmock.default.teardown(); に変更します。
• xhrmock.get → xhrmock.default.get に変更します。
• timeout のテストは https://www.npmjs.com/package/xhr-mock#simulate-a-timeout を参考に xhrmock.default.get(..., (req, res) => { return res.timeout(true); }); → xhrmock.default.get(..., () => new Promise(() => {})); に変更します。

またプロジェクトの root ディレクトリ直下に node-tar-extract というディレクトリが作成されていたので削除します（このディレクトリがいつ作成されたのか分かりませんでした）。

再度 npm test コマンドを実行すると、今度は全てのテストが成功しました。

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

clean タスク実行 → Rebuild Project 実行 → build タスク実行は問題なく BUILD SUCCESSFUL のメッセージが出力されて成功し、

gebTest タスクも BUILD SUCCESSFUL のメッセージが出力されて成功しました。

履歴

2019/04/13
初版発行。