Cloud Run functions × TypeScript 開発をしよう！【テスト：Jestをラクに実行する for VSCode】

# はじめに
この記事では以下のことについて説明しています。
- VSCodeを使って楽にJestを実行する方法

---
ひとつ前の記事では、`npm run test` でテストを実行していました。特定の関数だけテストしたい場合はファイル名を引数につけたりオプションを指定して実行する必要があります。

```bash
$ npx jest test/hoge.test.ts 

> advent-calendar-2024@1.0.0 test
> jest test/hoge.test.ts

 PASS  test/hoge.test.ts
  ✓ check (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.09 s, estimated 2 s
Ran all test suites matching /test\/hoge.test.ts/i.
```

### その他のオプション
https://jestjs.io/ja/docs/cli

しかしいちいち必要なオプションを入力しては時間がかかるし面倒くさいです。ということでJestを実行する上で便利なVSCodeの拡張機能を紹介します。

# 便利なJestのVSCode拡張機能
### vscode-jest

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/80a65751-f970-dbd0-c9dd-522363a1d91c.png)

https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

VSCodeの拡張機能で「Jest」と検索したら一番上にヒットする拡張機能です。
インストールするとテスト用のタブがサイドバーに追加され、テストケースの左横に緑の▶︎マークがつきます。

![スクリーンショット 2024-12-13 1.38.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/f880c1b2-6c80-0a9b-7815-87ea334a7eb9.png)

各アイコンの意味は以下のようになっています。

![スクリーンショット 2024-12-13 1.51.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/03e69a2a-9a20-8c9b-1028-45508c0f3cd1.png)

実行設定はデフォルトで「watch」になっていますが、実行速度が遅くなってしまうので「on-demand」にしておきましょう。歯車のアイコンをクリックして「on-demand」を選択後、右上のチェックマークを押します。

![スクリーンショット 2024-12-13 1.57.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/7b04b3e6-7e45-3692-9fa4-616fbd8f1a56.png)

デバッグモードは適当な場所にブレイクポイントを貼って実行するとその場所で処理が止まるようになります。

![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/61c965e9-5b65-0109-a73f-bac1b8dc040c.gif)

### Jest-Runner
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/32070cc3-0e9c-c407-e6db-59bba1681f25.png)


https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner

VSCodeの拡張機能で「Jest」と検索したら2番目にヒットする拡張機能です。vscode-jest とできることはほぼ同じですが、必要最低限の機能だけが揃っている感じです。「`alt` + 1」でテストが実行できるなどのショートカットが最初から設定されており、ちょこっとだけ便利。

 vscode-jest と両方入れる必要はあまりないので、好みでどちらかだけインスコしましょう。

### Jest Snippets
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/9512145f-fb88-a627-2428-ce676aed19e7.png)

https://marketplace.visualstudio.com/items?itemName=andys8.jest-snippets

Jest関連のコードをぱぱっと予測入力してくれる拡張機能。

![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374872/a55567c1-62db-27bf-948b-98f0e8d682f4.gif)

結構時間短縮になるので便利。基本的には
1. キャメルケースの先頭
1. ドットで区切られた単語の先頭

をベースとなる構文と組み合わせて構成しているので、よしなに予測しながら入力しよう。
入力対応しているスニペットでよく使いそうなものを挙げてみる。

#### describe系
| Trigger | Content                |
|---------|------------------------|
| desc    | describe               |
| desce   | describe.each          |
| ae      | afterEach              |
| aa      | afterAll               |
| be      | beforeEach             |
| ba      | beforeAll              |

#### test系
| Trigger | Content                |
|---------|------------------------|
| it      | it                     |
| ite     | it.each                |
| test    | test                   |
| teste   | test.each              |
| testet  | test.each (table)      |

#### expect系
| Trigger  | Content                            |
|----------|------------------------------------|
| exp      | expect                             |
| tb       | toBe                               |
| tbf      | toBeFalsy                          |
| tbgt     | toBeGreaterThan                    |
| tbgte    | toBeGreaterThanOrEqual             |
| tbi      | toBeInstanceOf                     |
| tblt     | toBeLessThan                       |
| tblte    | toBeLessThanOrEqual                |
| tbn      | toBeNull                           |
| tbt      | toBeTruthy                         |
| tbu      | toBeUndefined                      |
| tc       | toContain                          |
| tce      | toContainEqual                     |
| te       | toEqual                            |
| tse      | toStrictEqual                      |
| thbc     | toHaveBeenCalled                   |
| thbct    | toHaveBeenCalledTimes              |
| thp      | toHaveProperty                     |
| tm       | toMatch                            |
| tmo      | toMatchObject                      |
| tt       | toThrow                            |
| tte      | toThrowError                       |

# おわりに
Jestをラクに使えるVSCodeの拡張機能について紹介しました。明日以降いよいよGCP上でCloud Run functionsを動かす話に移っていこうと思います。