かんがるーさんの日記

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

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その６７ )( Prettier のインストール＋Jest Each を試してみる )

概要

記事一覧はこちらです。

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

  • 今回の手順で確認できるのは以下の内容です。
    • Prettier をインストールします。Jest Each のデータテーブル定義を綺麗にフォーマットしたいのがインストールの動機でしたが、最近の Javascript は Prettier でフォーマットするのが当たり前のようなのと、IntelliJ IDEA でも Prettier によるフォーマットがサポートされたので、IDE 上でのフォーマットも Prettier で行えるようにします。
    • Jest 23 からの新機能 Jest Each （Spock みたいなデータテーブルを定義して Parameterized test ができる機能）を試してみます。

参照したサイト・書籍

目次

  1. Prettier をインストールする
    1. 方針
    2. prettier、eslint-plugin-prettier、eslint-config-prettier をインストールする
    3. .eslintrc.js を変更する
    4. eslint-config-airbnb-base をアンインストールする
    5. IntelliJ IDEA に Prettier プラグインをインストールする
    6. package.json を変更する
    7. 動作確認
  2. Jest Each を試してみる
  3. 最後に

手順

Prettier をインストールする

方針

  • コードフォーマットは Prettier に完全に任せる。
  • ESLint は airbnb-base/legacy のルールや独自に定義したルールは全て破棄し、prettier のルールに従うようにする。airbnb-base/legacy のルールを使用しなくなるので、eslint-config-airbnb-base はアンインストールする。
  • IntelliJ IDEA に Prettier プラグインをインストールして、IDE 上でフォーマットできるようにする。
  • npm test コマンド実行時に全ての js ファイルが自動でフォーマットされるようにする。
  • npm run build コマンドの前には npm test コマンドを実行して必ずテストする想定なので、npm run build コマンド実行時は何もしない。

prettier、eslint-plugin-prettier、eslint-config-prettier をインストールする

Install のページの記述に従い、npm install --save-dev --save-exact prettier を実行して prettier をインストールします。

f:id:ksby:20180715101417p:plain

Integrating with ESLint のページの記述に従い、npm install --save-dev eslint-plugin-prettier eslint-config-prettier を実行します。

f:id:ksby:20180715101638p:plain

.eslintrc.js を変更する

.eslintrc.js の記述を以下の内容に入れ替えます。

module.exports = {
    "extends": "plugin:prettier/recommended"
};

eslint-config-airbnb-base をアンインストールする

npm uninstall --save-dev eslint-config-airbnb-base を実行します。

f:id:ksby:20180715114222p:plain

IntelliJ IDEA に Prettier プラグインをインストールする

IntelliJ IDEA のメインメニューから「File」-「Settings...」メニューを選択し、「Settings」ダイアログを表示します。

ダイアログの左側のリストから「Plugins」を選択した後、画面右側の「Browse repositories...」ボタンをクリックして「Browse Repositories」ダイアログを表示します。

f:id:ksby:20180715102522p:plain

「Browse Repositories」ダイアログが表示されたら検索フィールドに "Prettier" と入力します。リストに "Prettier" プラグインが表示されますので、選択して画面右側の「Install」ボタンをクリックします。

f:id:ksby:20180715102836p:plain

プラグインがダウロードされた後「Install」ボタンが「Restart IntelliJ IDEA」に変わるのでクリックします。

「Browse Repositories」ダイアログに戻るので「OK」ボタンをクリックします。ダイアログが閉じた後「IDE and Plugin Updates」ダイアログが表示されるので「Restart」ボタンをクリックして IntelliJ IDEA を再起動します。

これで IDE 上で Prettier でフォーマットできるようになりました。試してみます。

src/main/assets/js/lib/util/delayExecutor.js は現在以下のフォーマットですが、

f:id:ksby:20180715103543p:plain

Reformat with Prettier (Ctrl+Alt+Shift+P) を押すと以下のようにフォーマットされます。

f:id:ksby:20180715103749p:plain

package.json を変更する

package.json の以下の点を変更します。

  "scripts": {
    "test": "run-s prettier:format prettier:format-test jest",
    "jest": "jest --config=jest.config.json --coverage",
    "postinstall": "run-s clean:static-dir copy:all",
    ..........
    "postcss:watch": "postcss src/main/assets/css/**/* -d src/main/resources/static/css -x .min.css -w --poll",
    "prettier:format": "prettier --write src/main/assets/js/**/*.js",
    "prettier:format-test": "prettier --write src/test/assets/__tests__/**/*.js",
    "webpack:build": "webpack --mode production",
    ..........
  },
  • 以下の３行を追加します。
    • "jest": "jest --config=jest.config.json --coverage",
    • "prettier:format": "prettier --write src/main/assets/js/**/*.js",
    • "prettier:format-test": "prettier --write src/test/assets/__tests__/**/*.js",
  • test を jest --config=jest.config.json --coverage → run-s prettier:format prettier:format-test jest に変更します。

動作確認

確認前に先程 IDE 上でフォーマットした src/main/assets/js/lib/util/delayExecutor.js を元に戻します。

npm test コマンドを実行してみます。テスト実行前に js ファイルをフォーマットしていることが確認でき、テストも全て成功しました。

f:id:ksby:20180715113350p:plain f:id:ksby:20180715113447p:plain

src/main/assets/js/lib/util/delayExecutor.js を開いてみると、IDE 上でフォーマットした時と同じようにフォーマットされていました。

f:id:ksby:20180715113732p:plain

Jest Each を試してみる

Jest Each のデータテーブル定義が Spock みたいだな、と思っていたら、Blog の文章に Spock Data Tables とはっきり書かれていました。Spock を使っているのもデータテーブルによる Parameterized test が楽だからなので、やっぱりこの機能追加は嬉しいですね。

f:id:ksby:20180715123854p:plain

では試してみましょう。src/test/assets/tests/lib/util/converter.test.js で convertHiragana のテストを以下のように記述していますが、

  describe("convertHiragana のテスト", () => {
    beforeEach(() => {
      document.body.innerHTML = `
              <input type="text" name="sample" id="sample" value=""/>
            `;
    });

    test("全角カタカナはひらがなに変更される", () => {
      $("#sample").val("アイウエオ");
      converter.convertHiragana(["#sample"]);
      expect($("#sample").val()).toBe("あいうえお");
    });

    test("半角カタカナはひらがなに変更される", () => {
      $("#sample").val("ｱｲｳｴｵ");
      converter.convertHiragana(["#sample"]);
      expect($("#sample").val()).toBe("あいうえお");
    });
  });

これを Jest Each の機能で書き換えてみます。

  describe("convertHiragana のテスト(Jest Each版)", () => {
    beforeEach(() => {
      document.body.innerHTML = `
              <input type="text" name="sample" id="sample" value=""/>
            `;
    });

    test.each`
      str             | expected
      ${"アイウエオ"} | ${"あいうえお"}
      ${"ｱｲｳｴｵ"}      | ${"あいうえお"}
    `("$str --> $expected", ({ str, expected }) => {
      $("#sample").val(str);
      converter.convertHiragana(["#sample"]);
      expect($("#sample").val()).toBe(expected);
    });
  });

IDE からテストを実行すると無事成功しました。

f:id:ksby:20180715121710p:plain

わざと１件だけ失敗するようにデータテーブルを変更してみます。

  describe("convertHiragana のテスト(Jest Each版)", () => {
    beforeEach(() => {
      document.body.innerHTML = `
              <input type="text" name="sample" id="sample" value=""/>
            `;
    });

    test.each`
      str             | expected
      ${"アイウエオ"} | ${"あいうえお"}
      ${"ｱｲｳｴｵ"}      | ${"あいうえおx"}
    `("$str --> $expected", ({ str, expected }) => {
      $("#sample").val(str);
      converter.convertHiragana(["#sample"]);
      expect($("#sample").val()).toBe(expected);
    });
  });

IDE からテストを実行すると１件失敗しました。右側の青色でリンク表示されているパスをクリックすると、ソースでエラーになったところへジャンプします。

f:id:ksby:20180715121921p:plain

またコマンドラインで npm test コマンドで実行した場合には、失敗したテストは以下のように表示されます。以前より何かとても分かりやすくなっているような。。。　調べてみたら Jest 22 の Codeframe in test failures のようですね。分かりやすい表示になるよう変更されていました。

f:id:ksby:20180715122219p:plain

最後に

Javascript のフォーマットは Prettier に任せて独自定義はなしにする方が全然楽ですね。What is Prettier? を見ると json もフォーマットできるので、package.json や webpack.config.js 等の設定ファイルも Prettier でフォーマットし直しました。

Jest は Jest 22、Jest 23 の変更内容を見ましたが、Jest Each 以外にも便利そうな機能が追加されているようです。自分としては Javascript のテストは Jest 一択ですね。

履歴

2018/07/15
初版発行。