Spring Boot + npm + Geb で入力フォームを作ってテストする ( その８１ )( eslint を 4.19.1 → 5.16.0 へ、windows-build-tools を 3.1.0 → 5.1.0 へ、jest を 23.4.1 → 24.7.1 へ、postcss-cli を 4.1.1 → 6.1.2 へバージョンアップする )

概要

記事一覧はこちらです。

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 へバージョンアップする ) の続きです。

• 今回の手順で確認できるのは以下の内容です。
  • eslint を 4.19.1 → 5.16.0 へ、windows-build-tools を 3.1.0 → 5.1.0 へ、jest を 23.4.1 → 24.7.1 へ、postcss-cli を 4.1.1 → 6.1.2 へバージョンアップします。

参照したサイト・書籍

1. eslint-config-airbnb-base
   https://www.npmjs.com/package/eslint-config-airbnb-base

目次

1. eslint-config-airbnb-base を 13.0.0 → 13.1.0 へ、eslint を 4.19.1 → 5.16.0 へバージョンアップする
2. windows-build-tools を 3.1.0 → 5.1.0 へバージョンアップする
3. jest を 23.4.1 → 24.7.1 へバージョンアップする
4. postcss-cli を 4.1.1 → 6.1.2 へバージョンアップする
5. 最後に各種コマンドや build で問題がないか確認する

手順

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

以下のコマンドを実行して eslint-config-airbnb-base を 13.1.0 へバージョンアップします。

• npm info "eslint-config-airbnb-base@13.1.0" peerDependencies
• npx install-peerdeps --dev eslint-config-airbnb-base@13.1.0

以下のコマンドも実行して eslint 関連のモジュールを最新のバージョンにします。

• npm install --save-dev acorn@6.1.1
• npm install --save-dev eslint@5.16.0
• npm install --save-dev eslint-config-prettier@4.1.0
• npm install --save-dev eslint-loader@2.1.2
• npm install --save-dev eslint-plugin-import@2.16.0
• npm install --save-dev eslint-plugin-prettier@3.0.1

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

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

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

windows-build-tools を 3.1.0 → 5.1.0 へバージョンアップする

管理者モードで Powershell を起動した後、以下のコマンドを実行します。install だけだとなぜか先に進まなかったので uninstall してから install するようにしました。

• npm uninstall --global --production windows-build-tools
• npm install --global --production windows-build-tools@5.1.0

jest を 23.4.1 → 24.7.1 へバージョンアップする

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

• npm install --save-dev jest@24.7.1
• npm install --save-dev jest-html-reporter@2.5.0

レポートファイルを削除したいので最初に gradle から clean タスクを実行しておきます。npm test コマンドを実行するとテストは全て成功しました。

レポートファイルは build/reports/jest/jest-html-reporter.html に生成されており、開くと以下のように表示されます。

postcss-cli を 4.1.1 → 6.1.2 へバージョンアップする

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

• npm install --save-dev postcss-cli@6.1.2

以前 は画面の表示が崩れたと書きましたが、今回バージョンアップ後に原因を確認したところ common.min.css が出来ずに common.css だけが作成されて、common.css の中は minimize されているという結果だったからでした。src/main/resources/templates/web/common/fragments.html で読み込んでいるファイルを common.min.css → common.css に修正すると画面が正常に表示されるようになりました。

最後に各種コマンドや build で問題がないか確認する

最後にコマンド、build で問題がないか一通り確認します。

npm test コマンドは問題ありませんでした。

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

npm run build コマンドも問題ありません。

clean タスク実行 → Rebuild Project 実行 → build タスク実行も問題ありません。

gebTest タスクも問題ありませんでした。

IntelliJ IDEA の「Settings」ダイアログを開いて「Language & Frameworks」-「Node.js and NPM」を表示し、バージョンアップ後の状態も記載しておきます。eslint-plugin-import、prettier、webpack がもう新バージョンが出ていますが、今はバージョンアップしません。

次は Spring Boot や Java 側のモジュールをバージョンアップします。

履歴

2019/04/13
初版発行。