はじめに

AngularのテストフレームワークをJestに移行後、
Angular13->14へバージョンアップした際に起きたエラーについての備忘録です。
単純に自分の確認不足のエラーでしたが、戒めとして残します。

エラー時のバージョン


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 14.2.10
Node: 16.10.0
Package Manager: npm 7.24.0 
OS: linux arm64

Angular: 14.2.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1402.10
@angular-devkit/build-angular      14.2.10
@angular-devkit/core               14.2.10
@angular-devkit/schematics         14.2.10
@angular/cdk                       14.2.7
@angular/cli                       14.2.10
@angular/material                  14.2.7
@angular/material-moment-adapter   14.2.7
@schematics/angular                14.2.10
rxjs                               6.5.5
typescript                         4.6.4

現象

Angular14にバージョンアップ後、
VSCodeのデバッガでデバッグ実行をすると下記のエラーが発生しました。

Error: Unknown arguments: testMatch, runInBand

npx test ${filepath}ではテストが実行されますが、VSCode拡張機能のJestRunnerでも同様のエラーが発生する状態でした。

ちゃんと確認してみると、angular-buildersのMIGRATION.MDに記載がありました。

キャメルケースのコマンドライン引数はサポートされなくなりました。

解決

VSCodeのデバッガの引数が原因だったので、
settings.jsonのargsをケバブケースに修正することで解決しました🎉

変更前

settings.json

{
  // 省略
  "launch": {
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Jest All",
        "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
        "cwd": "${workspaceFolder}",
        "args": [
          "test",
          "--testMatch=\"**/+(*.)+(spec|test).+(ts|js)?(x)\"",
          "--runInBand"
        ],
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen"
      },
    ]
  },
  // 以下、省略
}

変更後

settings.json

{
  // 省略
  "launch": {
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Jest All",
        "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
        "cwd": "${workspaceFolder}",
        "args": [
          "test",
          "--test-match=\"**/+(*.)+(spec|test).+(ts|js)?(x)\"",
          "--run-in-band"
        ],
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen"
      },
    ]
  },
  // 以下、省略
}

まとめ

Angularのバージョンアップ時はangular-buildersのMIGRATION.MDも忘れず確認する。