VSCodeでJestを使うには、プロジェクトにJestをインストールし、テストファイルを作成して実行するのが基本です。
JestはJavaScriptやTypeScriptで広く利用されているテストフレームワークで、関数の単体テストや非同期処理のテスト、モック、コードカバレッジの確認などに利用できます。
VSCodeにはJestそのものが標準搭載されているわけではありません。
そのため、まずNode.jsプロジェクトへJestを導入し、そのうえで必要に応じてVSCodeのJest拡張機能を追加するという流れになります。
VSCodeの拡張機能を利用すると、テスト結果の確認や個別テストの実行、デバッグなどをエディター上から行いやすくなります。
Jestとは
JavaScriptやTypeScriptのテストに使えるフレームワーク
Jestは、JavaScriptやTypeScriptで作成したプログラムが期待どおりに動作するかを確認するためのテストフレームワークです。
たとえば、次のような関数があるとします。
function sum(a, b) {
return a + b;
}
この関数に対して、
1 + 2 を実行した結果が3になる
という条件を自動で確認できます。
Jestでは、主に次のようなテストを実行できます。
- 関数の戻り値の確認
- オブジェクトや配列の比較
- エラー発生の確認
- Promiseやasync/awaitを使った非同期処理のテスト
- モック関数のテスト
- スナップショットテスト
- コードカバレッジの測定
Reactなどのフロントエンド開発でも利用できます。
ただし、Reactコンポーネントの操作やDOMの確認については、JestだけでなくReact Testing Libraryなどを組み合わせることも一般的です。
VSCodeでJestを使うために必要な環境
Node.jsをインストールする
Jestを一般的なJavaScriptプロジェクトで利用する場合は、Node.jsとnpmを使用します。
VSCodeのターミナルを開き、次のコマンドを実行します。
node -v
続いて、
npm -v
を実行します。
それぞれバージョン番号が表示されれば、Node.jsとnpmを利用できる状態です。
Jest 30系ではNode.js 18以上が必要です。
ただし、新しく開発環境を構築する場合は、最低要件だけを満たす古いNode.jsを選ぶより、現在サポートされているNode.jsのLTS版を使用する方が安全です。
VSCodeでJest用プロジェクトを作成する
プロジェクトフォルダを作成する
例として、次の名前のフォルダを作成します。
jest-sample
VSCodeを起動し、
ファイル
↓
フォルダーを開く
から作成したフォルダを開きます。
npmプロジェクトを初期化する
VSCode上部のメニューから、
ターミナル
↓
新しいターミナル
を選択します。
ターミナルが開いたら、次のコマンドを実行します。
npm init -y
これにより、
package.json
が作成されます。
この時点では、プロジェクト構成はおおよそ次のようになります。
jest-sample/
└── package.json
Jestをインストールする
npmでJestを追加する
ターミナルで次のコマンドを実行します。
npm install --save-dev jest
短縮して、
npm install -D jest
としても構いません。
Jestは通常、本番環境で直接利用するライブラリではなく、開発時のテストに使用します。
そのため、dependenciesではなくdevDependenciesへ追加するのが一般的です。
インストール後は、
node_modules/
package-lock.json
などが作成され、package.jsonにもJestが追加されます。
{
"devDependencies": {
"jest": "インストールされたバージョン"
}
}
実際のバージョン番号はインストール時期によって異なります。
Jestで最初のテストを書く
テスト対象のファイルを作成する
まず、
sum.js
というファイルを作成します。
function sum(a, b) {
return a + b;
}
module.exports = sum;
この関数は、2つの値を受け取って合計を返します。
テストファイルを作成する
続いて、
sum.test.js
を作成します。
const sum = require('./sum');
test('1 + 2 は3になる', () => {
expect(sum(1, 2)).toBe(3);
});
ここでは、
test()
を使ってテスト内容を定義しています。
基本形は次のとおりです。
test('テスト名', () => {
// テスト内容
});
そして、
expect()
で実際の値を確認します。
expect(sum(1, 2)).toBe(3);
このコードは、
sum(1, 2)の結果が3か
を確認しています。
package.jsonにJestの実行コマンドを設定する
testスクリプトを変更する
package.jsonのscriptsを確認します。
初期状態では次のようになっていることがあります。
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
}
これを、
{
"scripts": {
"test": "jest"
}
}
へ変更します。
これで、
npm test
だけでJestを実行できます。
VSCodeのターミナルからJestを実行する
npm testを実行する
VSCodeのターミナルで次のコマンドを実行します。
npm test
テストが成功すると、おおよそ次のような結果が表示されます。
PASS ./sum.test.js
✓ 1 + 2 は3になる
Test Suites: 1 passed
Tests: 1 passed
PASSと表示されていれば、テストは成功しています。
テストが失敗する例
テストコードを次のように変更してみます。
expect(sum(1, 2)).toBe(4);
実際の結果は3なので、テストは失敗します。
Expected: 4
Received: 3
このように期待した値と実際の値を比較できるため、コードの問題を見つけやすくなります。
Jestが認識するテストファイル
.test.jsや.spec.jsを使う
Jestでは、一般的に次のようなファイル名がテストファイルとして利用されます。
sum.test.js
user.test.js
calculator.spec.js
そのため、初心者の場合は、
対象ファイル名.test.js
という形式にすると分かりやすいでしょう。
__tests__フォルダも利用できる
Jestでは、
__tests__
という名前のフォルダにテストファイルをまとめる方法もあります。
src/
├── sum.js
└── __tests__/
└── sum.test.js
プロジェクトの規模やチームのルールに合わせて管理方法を選択できます。
describeで複数のテストを整理する
テストをグループ化する
テスト数が増えた場合は、
describe()
を利用すると分かりやすく整理できます。
const sum = require('./sum');
describe('sum関数', () => {
test('1 + 2 は3になる', () => {
expect(sum(1, 2)).toBe(3);
});
test('10 + 20 は30になる', () => {
expect(sum(10, 20)).toBe(30);
});
});
実行結果でも、
sum関数
├─ 1 + 2 は3になる
└─ 10 + 20 は30になる
のようにテストの関係を把握しやすくなります。
Jestでよく使うMatcher
toBe
数値や文字列などを比較する場合によく使用します。
expect(2 + 3).toBe(5);
toBe()は厳密にはObject.isを使って比較します。
toEqual
オブジェクトや配列の内容を比較するときによく使用します。
expect({
name: 'Taro',
age: 20
}).toEqual({
name: 'Taro',
age: 20
});
オブジェクトや配列の内容を比較したい場合は、toEqual()を使う方が適しています。
toBeTruthy
真として評価される値かどうかを確認します。
expect(true).toBeTruthy();
toBeFalsy
偽として評価される値かどうかを確認します。
expect(false).toBeFalsy();
toContain
配列や文字列の中に特定の値が含まれているかを確認します。
expect(['HTML', 'CSS', 'JavaScript']).toContain('JavaScript');
toThrow
関数がエラーを発生させるか確認できます。
function errorFunction() {
throw new Error('エラー');
}
test('エラーが発生する', () => {
expect(() => errorFunction()).toThrow();
});
VSCodeのJest拡張機能を使う
Jest拡張機能をインストールする
Jestはターミナルだけでも利用できます。
しかし、VSCodeのJest拡張機能を追加すると、テストの実行や確認がしやすくなります。
VSCode左側の拡張機能アイコンを開き、
Jest
と検索します。
代表的な拡張機能としてvscode-jestがあります。
Jest本体とは別物
注意したいのは、VSCodeのJest拡張機能とJest本体は別物という点です。
基本的な関係は次のようになります。
プロジェクト
↓
Jest本体
↓
テスト実行
＋
VSCode
↓
Jest拡張機能
↓
Jestを操作しやすくする
VSCodeへJest拡張機能を入れただけでは、プロジェクトにJestがインストールされたことにはなりません。
まず、
npm install -D jest
などでJest本体を利用できる状態にしておく必要があります。
参考サイト
vscode-jest を導入してテストの開発体験を向上させる – mizdra’s blog
VSCodeのTest ExplorerからJestを実行する
テスト一覧を表示できる
Jest拡張機能を利用すると、VSCodeのTestingビューにJestのテストが表示されます。
そこから、
- すべてのテストを実行
- テストファイル単位で実行
- 1つのテストだけ実行
- テストをデバッグ
- カバレッジ付きで実行
といった操作ができます。
エディター上から個別テストを実行する
たとえば、
test('1 + 2 は3になる', () => {
expect(sum(1, 2)).toBe(3);
});
のようなコードでは、テストの近くに実行ボタンが表示される場合があります。
これを利用すると、ターミナルへコマンドを入力しなくても特定のテストだけ実行できます。
JestをWatchモードで実行する
変更に応じて自動でテストする
開発中に便利なのがWatchモードです。
npx jest --watch
を実行すると、変更されたファイルに関連するテストを中心に再実行できます。
一方、
npx jest --watchAll
では、ファイル変更時にすべてのテストを実行します。
違いを整理すると次のとおりです。
--watch
→ 変更内容に関連するテストを中心に実行
--watchAll
→ 変更時にすべてのテストを実行
テスト数が多い大規模プロジェクトでは、--watchを利用した方が効率的な場合があります。
VSCode拡張機能のrunModeを使う
テストの自動実行方法を設定できる
現在のvscode-jestでは、runModeを使ってテストの実行方法を設定できます。
たとえば、
"jest.runMode": "watch"
のように設定できます。
代表的な実行モードとしては、
watch
on-demand
on-save
などがあります。
プロジェクトの規模や開発スタイルによって、自動テストと手動テストを使い分けるとよいでしょう。
特定のテストファイルだけ実行する
ファイル名を指定する
たとえば、
sum.test.js
だけを実行したい場合は、
npx jest sum.test.js
とします。
npmスクリプト経由なら、
npm test -- sum.test.js
でも実行できます。
テスト数が増えたプロジェクトでは、特定のファイルだけ実行すると確認時間を短縮できます。
特定のテスト名だけ実行する
-tオプションを使う
たとえば、
test('ユーザーを作成できる', () => {
// テスト処理
});
というテストがある場合は、
npx jest -t "ユーザーを作成できる"
のように実行できます。
テスト数が多い場合に便利です。
VSCodeでJestをデバッグする
ブレークポイントを利用する
Jestのテストは、VSCodeのデバッグ機能と組み合わせて確認できます。
たとえば、
test('計算テスト', () => {
const result = sum(10, 20);
expect(result).toBe(30);
});
というコードで、
const result = sum(10, 20);
の行へブレークポイントを設定します。
Jest拡張機能からデバッグ実行すると、処理を途中で停止し、
- 変数の値
- コールスタック
- スコープ
- 処理の流れ
などを確認できます。
テストが失敗する原因を詳しく調べたい場合に便利です。
Jestでコードカバレッジを確認する
–coverageを使う
Jestでは、どの程度コードがテストされているかを確認できます。
npx jest --coverage
または、
npm test -- --coverage
を実行します。
結果には、主に次の項目が表示されます。
Statements
Branches
Functions
Lines
たとえば、
Statements : 100%
Branches : 80%
Functions : 100%
Lines : 100%
のように確認できます。
カバレッジ100％でも十分とは限らない
注意したいのは、コードカバレッジが100％でも、必ずしも十分なテストが書かれているとは限らない点です。
すべての行が実行されていても、
境界値のテスト
異常系
入力値の組み合わせ
エラー処理
などが十分確認されていない場合があります。
カバレッジは、テスト品質を判断するための一つの指標として利用するのが適切です。
Jestで非同期処理をテストする
asyncとawaitを使う
Jestでは、Promiseやasync、awaitを利用した非同期処理もテストできます。
たとえば、次の関数があるとします。
async function getUserName() {
return 'Taro';
}
module.exports = getUserName;
テスト側では、
const getUserName = require('./getUserName');
test('ユーザー名を取得できる', async () => {
const name = await getUserName();
expect(name).toBe('Taro');
});
のように書けます。
API通信やデータベース処理などを含むアプリケーションでは、非同期テストを利用する機会が多くなります。
Jestでモックを使う
jest.fn()でモック関数を作成する
外部APIやメール送信処理などを実際に動かしたくない場合は、モックが便利です。
const mockFunction = jest.fn();
mockFunction('hello');
expect(mockFunction).toHaveBeenCalled();
引数まで確認する場合は、
expect(mockFunction).toHaveBeenCalledWith('hello');
と記述できます。
Jestには複数のモック方法がある
Jestのモック機能には、
jest.fn()
jest.spyOn()
jest.mock()
などがあります。
jest.fn()はその中でも、モック関数を作成する基本的な方法です。
TypeScriptでJestを使う方法
TypeScriptでは追加設定が必要になる
JavaScriptだけでなくTypeScriptでもJestを利用できます。
ただし、TypeScriptをそのまま実行するためには追加設定が必要になる場合があります。
代表的な方法として、
Babel
ts-jest
などがあります。
ts-jestを使う方法
ts-jestを利用する場合は、たとえば次のようにインストールします。
npm install --save-dev jest typescript ts-jest
すでにTypeScriptを導入済みの場合は、typescriptを追加でインストールする必要はありません。
重要なのは、
TypeScriptなら必ずts-jestが必要
というわけではないことです。
プロジェクトによってはBabelなどを使ってTypeScriptを変換します。
TypeScriptでJestの型を利用する
@jest/globalsを使う
TypeScriptでは、
import { describe, expect, test } from '@jest/globals';
のようにJest APIをインポートして利用する方法があります。
import { describe, expect, test } from '@jest/globals';
function sum(a: number, b: number): number {
return a + b;
}
describe('sum', () => {
test('1 + 2 は3になる', () => {
expect(sum(1, 2)).toBe(3);
});
});
@types/jestを使う方法もある
プロジェクトによっては、
@types/jest
を利用して、testやexpectなどの型をグローバルに認識させる場合もあります。
どちらを使用するかは、プロジェクトの設定やコーディング方針によって異なります。
Jest 30系の型定義を利用する場合は、TypeScript 5.4以上が必要です。
jest.config.tsを使う場合の注意点
設定ファイル自体をTypeScriptで書く場合がある
Jestの設定ファイルを、
jest.config.ts
としてTypeScriptで記述することもできます。
ただし、Jest設定ファイル自体をTypeScriptとして読み込む場合、環境によってはts-nodeなどが必要です。
たとえば、
npm install --save-dev ts-node
を追加することがあります。
これは、
TypeScriptのテストコードを実行する設定
と、
jest.config.tsを読み込む設定
が別であるためです。
混同しないように注意しましょう。
ブラウザDOMをテストする場合
Jestのデフォルト環境はNode
Jest 30系では、デフォルトのテスト環境は、
node
です。
そのため、
document.createElement('div');
などのブラウザDOM APIを使用すると、
document is not defined
といったエラーが発生する場合があります。
jest-environment-jsdomを使う
ブラウザに近いDOM環境が必要な場合は、
npm install --save-dev jest-environment-jsdom
をインストールします。
そして設定ファイルで、
module.exports = {
testEnvironment: 'jsdom',
};
のように指定します。
ReactなどブラウザDOMを扱うフロントエンドテストでは、特に重要な設定です。
ReactをJestでテストする場合
React Testing Libraryと組み合わせることが多い
Reactコンポーネントのテストでは、Jest単体ではなくReact Testing Libraryなどを併用するケースがあります。
役割を簡単に分けると、
Jest
↓
テストの実行
アサーション
モックなど
React Testing Library
↓
Reactコンポーネントの表示
DOM操作
ユーザー操作に近いテスト
という関係になります。
そのため、
Jest = React専用テストツール
ではありません。
JestはJavaScriptやTypeScript全般で利用できるテストフレームワークです。
Jestが動かない場合の確認ポイント
jest is not recognizedと表示される
ターミナルで、
jest
と直接実行していることが原因の場合があります。
プロジェクトへローカルインストールしている場合は、
npx jest
または、
npm test
を利用するとよいでしょう。
VSCodeのJest拡張機能が動かない
まずターミナルで、
npm test
が正常に実行できるか確認します。
拡張機能側の問題を調べる前に、Jest本体が正常に動いているか確認することが重要です。
テストファイルが認識されない
ファイル名が、
example.test.js
または、
example.spec.js
のようになっているか確認します。
Jestの設定を変更している場合は、testMatchやtestRegexなどの設定も確認します。
document is not definedと表示される
ブラウザDOMを利用しているのに、テスト環境がnodeになっている可能性があります。
その場合は、
jest-environment-jsdom
を導入し、
testEnvironment: 'jsdom'
を設定します。
VSCodeでJestを使うおすすめの構成
小規模なJavaScriptプロジェクトの場合
たとえば次のような構成にすると分かりやすいでしょう。
my-project/
├── src/
│ └── sum.js
├── tests/
│ └── sum.test.js
├── node_modules/
├── package.json
└── package-lock.json
package.jsonには、
{
"scripts": {
"test": "jest",
"test:watch": "jest --watchAll",
"test:coverage": "jest --coverage"
}
}
のようにスクリプトを登録できます。
通常のテストを実行する
npm test
Watchモードで実行する
npm run test:watch
コードカバレッジを確認する
npm run test:coverage
毎回Jestのオプションを入力する必要がなくなるため、開発作業を効率化できます。
VSCodeでJestを使う基本的な流れ
VSCodeとJestを使った開発では、おおよそ次の流れになります。
VSCodeでプロジェクトを開く
↓
Jestをインストール
↓
実装コードを書く
↓
.test.jsや.spec.jsを書く
↓
npm testを実行
↓
失敗したテストを確認
↓
コードを修正
↓
再テスト
↓
必要に応じてカバレッジを確認
さらにVSCodeのJest拡張機能を追加すると、
コードを書く
↓
VSCode上からテスト
↓
失敗箇所を確認
↓
デバッグ
↓
修正
という流れをスムーズに進められます。
VSCodeとJestを組み合わせるメリット
コード作成からテストまでVSCode内で完結しやすい
VSCodeとJestを組み合わせる大きなメリットは、コード作成、テスト、デバッグを一つの開発環境内で行いやすいことです。
特にJest拡張機能を利用すると、
- テスト一覧の確認
- 個別テストの実行
- テスト結果の表示
- デバッグ
- Watchモード
- コードカバレッジの確認
などをVSCodeから操作できます。
VSCodeでJestを使う場合は最小構成から始めるのがおすすめ
初めてJestを利用する場合は、最初からTypeScriptやReact、複雑な設定ファイルを導入する必要はありません。
まずは、
npm install --save-dev jest
でJestをインストールし、
sum.test.js
のような簡単なテストファイルを1つ作成します。
そのうえで、
npm test
を実行し、Jestの基本的な仕組みを理解するとよいでしょう。
慣れてきたら、
VSCodeのJest拡張機能
Watchモード
デバッグ
コードカバレッジ
モック
TypeScript
jsdom
React Testing Library
といった機能を順番に追加していくと理解しやすくなります。
VSCodeとJestを組み合わせれば、テストの作成から実行、原因調査、修正までを効率よく進められるため、JavaScriptやTypeScript開発の品質向上に役立ちます。
以上、VSCodeでJestを使う方法についてでした。
最後までお読みいただき、ありがとうございました。
