はじめに
本記事ではTypeScriptにおいてJestで単体テストの実装方法を解説します。
Jestとは…?
JestとはJavaScript(TypeScript)のテスティングフレームワークです。
Jestの導入
はじめにJestを導入します。
以下のコマンドを実行します。
$ yarn add --dev typescript jest ts-jest @types/jestpackage.jsonの更新
npm、もしくはyarnで単体テストを実行できるようにpackage.jsonのscriptsに“test”: “jest”を追記します。
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
...
"test": "jest"
},
"dependencies": {
...
},
"devDependencies": {
...
}
}TypeScript用の設定
次にTypeScriptでJestが実行できるようにjest.config.jsを作成します。
以下のコマンドを実行します。
$ yarn ts-jest config:initjest.config.jsが生成されます。
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};テストディレクトリの設定
Jestがテストを実行するファイルを検索するために使用するディレクトリのパスのリストを設定します。
jest.config.jsを以下のように記載します。
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
roots: ["<rootDir>/tests", "<rootDir>/src"]
};カバレッジの設定
単体テストの実行結果としてカバレッジを出力するように設定します。
jest.config.jsを以下のように記載します。
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
roots: ["<rootDir>/tests", "<rootDir>/src"],
collectCoverage: true,
coverageDirectory: 'coverage',
coverageReporters: ["html"],
collectCoverageFrom: [
"**/*.ts",
"!**/node_modules/**",
]
};簡単に説明します。
- collectCoverage
- テストを実行した際にカバレッジを計測するかを設定します。
- coverageDirectory
- 計測したカバレッジの計測結果のファイルを出力するディレクトリを指定します。
- 何も指定しなかった場合は、coverageフォルダがプロジェクトフォルダの配下に作られます。
- coverageReporters
- 計測したカバレッジの計測結果のファイルの出力形式を指定します。
- collectCoverageFrom
- カバレッジを計測するファイルの指定をします。
- ここでは、.tsファイルを対象としており、node_modules配下のファイルは対象外にしています。
テストコードの実装
まずはテストしたいコードを実装します。
srcディレクトリ配下にsum.tsを作成して、以下のように実装します。
function sum(a: number, b: number): number {
return a + b;
}
export default sum;次にテストコードを実装します。
プロジェクトディレクトリの配下にsum.test.tsを作成します。
以下のように実装します。
import { describe, expect, test } from '@jest/globals';
import sum from '../src/sum';
describe('sum module', () => {
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
});上記はsum(1, 2)の戻り値がtoBe(3)、つまり3であることをチェックしています。
以下のコマンドを実行すると単体テストが実行されます。
$ yarn test以下のようにPASSと出れば単体テストが成功しました。
yarn run v1.22.17
$ jest
PASS tests/sum.test.ts
sum module
✓ adds 1 + 2 to equal 3 (2 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 6.923 s
Ran all test suites.
✨ Done in 8.08s.カバレッジの確認
プロジェクトディレクトリ配下にcoverageディレクトリが生成されていると思います。
そのディレクトリの中にindex.htmlやsum.ts.htmlが生成されているのでブラウザなどで開くとカバレッジの結果が見れると思います。
関連記事
Jestにおいて、Matcher(Assert)の一覧が知りたい人は以下の記事をご参照ください。
Modifierの一覧が知りたい人は以下の記事をご覧ください。
Mockの一覧が知りたい人は以下の記事をご覧ください。
まとめ
この記事ではTypeScriptを使用してJestで単体テストを書くための環境構築の手順をまとめました。
是非、いいねやコメントをお願いします。
コメント