はじめに

この記事では以下のことについて説明しています。

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を動かす話に移っていこうと思います。