JavaScript の Optional Chaining が便利だけど jest + TypeScript 環境でエラーになる

Optional Chaining とは

Optional Chaining とは ?. という構文です。

obj?.foo と書いたとき、obj が nullish なとき（つまり null または undefined）の場合は結果が undefined になります。そうでない場合は obj.foo が返ります。つまり返却される値は下記と同じです。obj が null のときでも null ではなく undefined が返ります。

const foo = obj ? obj.foo : undefined;

これまでは obj.foo とだけ書いたとき obj が null または undefined だとエラーになっていました。 obj が存在するかのチェックが必要でした。optional chaining を使うことで明示的な条件分岐を書くことなく処理できるようになります。

オプショナルチェーン (?.) - JavaScript | MDN

オプショナルチェーン (optional chaining) 演算子 (?.) は、接続されたオブジェクトチェーンの深くに位置するプロパティの値を、チェーン内の各参照が正しいかどうかを明示的に確認せずに読み込むことを可能にします。

developer.mozilla.org

そろそろJavaScriptに採用されそうなOptional Chainingを今さら徹底解説 - Qiita

みなさん、Optional Chaining使ってますか？　私は先日出たTypeScript 3.7 Betaを小さいプロジェクトに導入して使ってみました。これはとても快適ですね。例によって、Optional ChainingはECMAScriptに対するプロポーザルの...

qiita.com

jest + TypeScript で optional chaining が通らない

?. の箇所が unexpected token になってしまうことがありました。TypeScript のコンパイルオプションで target を ES2020 以前にすることで回避できました。

{
  "compilerOptions": {
    "target": "ES2019",
  }
}