かんがるーさんの日記

最近自分が興味をもったものを調べた時の手順等を書いています。今は Spring Boot をいじっています。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その47 )( Node.js を 8.9.1 → 8.9.4 へ、npm を 5.5.1 → 5.6.0 へバージョンアップする )

概要

記事一覧はこちらです。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その46 )( Spring Boot を 1.5.9 → 1.5.10 へ、error-prone を 2.1.3 → 2.2.0 へ、Geb を 2.0 → 2.1 へバージョンアップする ) の続きです。

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

参照したサイト・書籍

目次

  1. Node.js を 8.9.1 → 8.9.4 へ、npm を 5.5.1 → 5.6.0 へバージョンアップする
  2. モジュールを最新版にバージョンアップする
  3. eslint を 4.10.0 → 4.18.1 へバージョンアップする
  4. windows-build-tools を 1.3.2 → 2.2.1 へ、jest を 21.2.1 → 22.4.2 へバージョンアップする

手順

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

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

f:id:ksby:20180227064943p:plain f:id:ksby:20180227065102p:plain

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

f:id:ksby:20180227065345p:plain

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

f:id:ksby:20180227065542p:plain

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

f:id:ksby:20180227065932p:plain

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

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

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

f:id:ksby:20180227070746p:plain

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

f:id:ksby:20180227070846p:plain f:id:ksby:20180227070941p:plain

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

  • bootstrap は現行のまま。4.0.0 にはバージョンアップしない。
  • webpack は現行のまま。4.0.1 にはバージョンアップしない。
  • バージョンアップは npm update ではなく npm install --save-dev autoprefixer@8.0.0(package.json の dependencies に記載されているものは --save、devDependencies に記載されているものは --save-dev にする) のようにバージョンを指定しながらバージョンアップする。
  • 1つずつ上からバージョンアップする。関連しそうなところを動作確認しながら進める。
  • eslint、jest + widows-build-tools は別に章を分けてバージョンアップする。

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

  • npm install --save-dev autoprefixer@8.0.0
  • npm install --save axios@0.18.0
  • npm install --save-dev browser-sync@2.23.6
  • npm install --save jquery@3.3.1
  • npm install --save-dev jquery-mockjax@2.3.0
  • npm install --save mobx@3.5.1
  • npm install --save-dev nock@9.2.2
  • npm install --save-dev npm-run-all@4.1.2
  • postcss-cli は 5.0.0 にバージョンアップすると画面の表示が崩れたので 4.1.1 のままにします。
  • npm install --save-dev stylelint@9.1.1
  • npm install --save-dev stylelint-config-standard@18.1.0
  • npm install --save-dev uglifyjs-webpack-plugin@1.2.2
  • xhr-mock は 2.2.0 にバージョンアップすると npm run test でエラーが出たので 1.9.1 のままにします。

eslint を 4.10.0 → 4.18.1 へバージョンアップする

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

  • npm install --save-dev eslint@4.18.1
  • npm install --save-dev eslint-loader@2.0.0
  • npm install --save-dev eslint-plugin-import@2.9.0

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

f:id:ksby:20180228012028p:plain

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

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

f:id:ksby:20180228012827p:plain

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

f:id:ksby:20180228013351p:plain

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

f:id:ksby:20180228013619p:plain

以前からバージョンアップ後に失敗していた Form.test.js のテストを実行すると、今度は成功しました。

f:id:ksby:20180228013951p:plain

Jest 用のテストを全て実行してみます。IntelliJ IDEA のメインメニューから「Run」-「Edit Configurations...」を選択して「Run/Debug Configurations」ダイアログを表示した後、以下の画像のように設定します。

f:id:ksby:20180228014421p:plain

テストを実行してみると1つだけ失敗しました。

f:id:ksby:20180228014932p:plain

f:id:ksby:20180228015111p:plain

失敗したテストは以下のコードです。

f:id:ksby:20180228020111p:plain

調査しましたが、原因が全く分かりませんでした。。。 以下の点は分かったのですが、そこからどうすれば良いのかが分かりません。先に進みたいのでコメントアウトすることにします。

  • $.ajaxdataType: "jsonp" を指定していると 郵便番号検索API を呼び出してから戻ってこない。
  • dataType: "jsonp" を削除すると Error: Cross origin null forbidden というエラーメッセージが表示される。

再度 IntelliJ IDEA から Jest 用のテストを全て実行すると今度は成功しました。

f:id:ksby:20180305004037p:plain

jest-html-reporter のレポートも問題なく表示されていました。npm run test を実行してレポートを生成すると、以下のように表示されました(エラーが出た時と正常時の時のキャプチャを載せておきます)。

f:id:ksby:20180305004649p:plain f:id:ksby:20180305004916p:plain

履歴

2018/03/05
初版発行。