【GAS】claspでTypeScriptを使ってユニットテストもする

前回からの続き
blog.beatdjam.com

claspはデフォルトでTypeScriptに対応していて、作成した.tsファイルを含んだ状態でpushすると自動でトランスパイルしてくれる。
せっかくなのでTypeScriptを導入した上でローカルでユニットテストを実行できるようにした。

claspのプロジェクトでTSを扱えるようにする

まず、GASの型情報を取得する。

$ npm i -S @types/google-apps-script

次に、tsconfig.json を作成する。

{
    "compilerOptions": {
        "lib": [
            "es2019"
        ],
        "experimentalDecorators": true,
        "esModuleInterop": true
    }
}

これで、ローカルで編集する際にGASの型情報を参照した上で、ES2019環境で書くことができるようになった。

ユニットテストを動くようにする

実体としては普通のTSのプロジェクトなので、普通にJestを導入する。

$ npm i jest @types/jest ts-jest -D

jset.config.js でテスト周りの設定をする。
今回は src 配下にファイルを置いているのでそのように指定した

module.exports = {
    "roots": [
        "<rootDir>/src"
    ],
    "testMatch": [
        "**/__tests__/**/*.+(ts|tsx|js)",
        "**/?(*.)+(spec|test).+(ts|tsx|js)"
    ],
    "transform": {
        "^.+\\.(ts|tsx)$": "ts-jest"
    },
}

あとはtestMatchにマッチするようなファイル名でテストを書いて実行してやれば良い。

$ npx jest

不要ファイルの除外

ここまでの手順で、管理する必要がなかったりGASに上げる必要のないファイルが出来たりする。
claspはgitのように .claspignore を設定することで任意のファイルを除外できる。
今回はこのように設定したが、拡張子がjsのファイルも残す場合は書き足す必要がある。

**/**
!src/*.ts
src/*.test.ts
!appsscript.json
coverage/*

一応 .gitignore もこんな感じにしてる

node_modules
.idea
coverage

注意点

一度GAS側に反映されたファイルは $ clasp pull するとjsになって落ちてくる。
TSで書く場合はGitで管理して、オンラインエディタ上で編集を行わないほうが良さそう。

まとめ

• TS自体は書いて $ clasp push したら動く
• ローカルで書くなら型情報入れる必要がある
• ユニットテストとかは普通のTSのプロジェクトとして手元で入れれば良い
• GAS側に一度反映したファイルはJSになるので注意

今回の作業に使ったリポジトリはこれです。
GitHub - beatdjam/anniversary-notifier