JestでTypeScriptのテストを実施する場合には、まずはそれらのTypeScriptをJavaScriptに変換する必要がある。この変換の仕組みとして、babel-jestを使用する方法を記載する。
環境
- Windows 11 Home 23H2
- Node.js v20.12.2
babel-jestとは？
babel-jestとは、Jest上でBabelによるトランスパイルを可能にするプラグイン。
インストール方法
手順１．babel-jestをインストール
以下のコマンドで、babel-jestとその依存関係をインストールする。
// TypeScriptと、実行するめのts-nodeをインストール
// ※公式サイトでは、ts-nodeについて言及されていないが必要
npm install --save-dev typescript ts-node
// JestとTypeScript定義をインストール
npm install --save-dev jest @types/jest
// Babel関係をインストール
// presetは、pluginをまとめたものを意味する
npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-typescript手順２．テスト用スクリプトを定義
package.jsonのテスト用スクリプトを以下のように定義する。
// package.json
{
...
"scripts": {
"test": "jest"
},
}手順３．Jestの設定ファイルの作成
以下のコマンドを実行し、いくつかの質問に回答すると、回答に合わせた設定ファイル（jest.config.js）が作成される。自身の用途に合わせて回答すること。
npm init jest
// TypeScriptを使用するか否か（Yes|No）
√ Would you like to use Typescript for the configuration file? ... yes
// テスト環境をどうするか（node|jsdom）
√ Choose the test environment that will be used for testing » node
// カバレッジレポートが必要か（Yes|No）
√ Do you want Jest to add coverage reports? ... yes
// コードカバレッジを指示するためのプロバイダをどうするか（v8|babel）
√ Which provider should be used to instrument code for coverage? » v8
// 自動でモック呼び出し、インスタンス、コンテキストと結果をクリアするか（Yes|No）
√ Automatically clear mock calls, instances, contexts and results before every test? ... yes手順４．Babelの設定ファイルの作成
設定ファイルを以下のように変更し、TypeScriptのトランスパイルを可能にする。
// babel.config.js
module.exports = {
presets: [
['@babel/preset-env', {targets: {node: 'current'}}],
'@babel/preset-typescript',
],
};手順４．動作確認
以下のような動作確認用コードを作成する。
// sum.ts（テスト対象コード）
export function sum(a, b) {
return a + b;
}// sum.test.ts（テストコード）
import { sum } from './sum';
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});テストコマンドを実行し、PASSが表示されれば成功。
> npm run test
> react@1.0.0 test
> jest
PASS ./sum.test.ts
√ adds 1 + 2 to equal 3 (4 ms)
----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
sum.ts | 100 | 100 | 100 | 100 |
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.627 s, estimated 2 s
Ran all test suites.
PS > npm run test参考
Page Not Found · Jest
jestjs.io
