Spring Boot + npm + Geb で入力フォームを作ってテストする ( その47 )( Node.js を 8.9.1 → 8.9.4 へ、npm を 5.5.1 → 5.6.0 へバージョンアップする )
概要
記事一覧はこちらです。
- 今回の手順で確認できるのは以下の内容です。
- Javascript 側のライブラリ/モジュールをバージョンアップします。Node.js や npm も最新版にバージョンアップします。
参照したサイト・書籍
目次
- Node.js を 8.9.1 → 8.9.4 へ、npm を 5.5.1 → 5.6.0 へバージョンアップする
- モジュールを最新版にバージョンアップする
- eslint を 4.10.0 → 4.18.1 へバージョンアップする
- 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 がインストール可能か確認します。
8.9.4 が表示されていますので、8.9.4 へバージョンアップします。
npm も最新版にバージョンアップします。npm の最新バージョンは https://docs.npmjs.com/ の一番下を見ると 5.6.0 とありましたので、
5.6.0 にバージョンアップします。
モジュールを最新版にバージョンアップする
バージョンアップ可能なモジュールを確認します。IntelliJ IDEA のメインメニューから「File」-「Settings...」を選択して「Settings」ダイアログを開き、画面左側で「Language & Frameworks」-「Node.js and NPM」を選択します。
画面右側にモジュールの一覧と現行バージョン、最新バージョン一覧が表示されます。
今回モジュール一覧には以下のように表示されました。
今回は以下の方針でバージョンアップします。
- 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
コマンドを実行してみると、特にエラーは出ずに終了しました。
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
を実行します。
次に普通に起動したコマンドプロンプトで npm install --save-dev jest@22.4.2
を実行します。
npm install --save-dev jest-html-reporter@2.0.0
も実行します。
以前からバージョンアップ後に失敗していた Form.test.js のテストを実行すると、今度は成功しました。
Jest 用のテストを全て実行してみます。IntelliJ IDEA のメインメニューから「Run」-「Edit Configurations...」を選択して「Run/Debug Configurations」ダイアログを表示した後、以下の画像のように設定します。
テストを実行してみると1つだけ失敗しました。
失敗したテストは以下のコードです。
調査しましたが、原因が全く分かりませんでした。。。 以下の点は分かったのですが、そこからどうすれば良いのかが分かりません。先に進みたいのでコメントアウトすることにします。
$.ajax
でdataType: "jsonp"
を指定していると 郵便番号検索API を呼び出してから戻ってこない。dataType: "jsonp"
を削除するとError: Cross origin null forbidden
というエラーメッセージが表示される。
再度 IntelliJ IDEA から Jest 用のテストを全て実行すると今度は成功しました。
jest-html-reporter のレポートも問題なく表示されていました。npm run test
を実行してレポートを生成すると、以下のように表示されました(エラーが出た時と正常時の時のキャプチャを載せておきます)。
履歴
2018/03/05
初版発行。