はじめに
この記事では以下のことについて説明しています。
- VSCodeを使って楽にJestを実行する方法
ひとつ前の記事では、npm run test でテストを実行していました。特定の関数だけテストしたい場合はファイル名を引数につけたりオプションを指定して実行する必要があります。
$ 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.
その他のオプション
しかしいちいち必要なオプションを入力しては時間がかかるし面倒くさいです。ということでJestを実行する上で便利なVSCodeの拡張機能を紹介します。
便利なJestのVSCode拡張機能
vscode-jest
VSCodeの拡張機能で「Jest」と検索したら一番上にヒットする拡張機能です。
インストールするとテスト用のタブがサイドバーに追加され、テストケースの左横に緑の▶︎マークがつきます。
各アイコンの意味は以下のようになっています。
実行設定はデフォルトで「watch」になっていますが、実行速度が遅くなってしまうので「on-demand」にしておきましょう。歯車のアイコンをクリックして「on-demand」を選択後、右上のチェックマークを押します。
デバッグモードは適当な場所にブレイクポイントを貼って実行するとその場所で処理が止まるようになります。
Jest-Runner
VSCodeの拡張機能で「Jest」と検索したら2番目にヒットする拡張機能です。vscode-jest とできることはほぼ同じですが、必要最低限の機能だけが揃っている感じです。「alt + 1」でテストが実行できるなどのショートカットが最初から設定されており、ちょこっとだけ便利。
vscode-jest と両方入れる必要はあまりないので、好みでどちらかだけインスコしましょう。
Jest Snippets
Jest関連のコードをぱぱっと予測入力してくれる拡張機能。
結構時間短縮になるので便利。基本的には
- キャメルケースの先頭
- ドットで区切られた単語の先頭
をベースとなる構文と組み合わせて構成しているので、よしなに予測しながら入力しよう。
入力対応しているスニペットでよく使いそうなものを挙げてみる。
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を動かす話に移っていこうと思います。