1. 概要
Unit Test FrameworkのVitestを触ってみます。
次世代フロントエンドツールのViteを基盤としているようです。
2. TypeScriptのコンパイラをインストール
2-1. こちらを参考
3. tsconfig.json を生成 + 修正
3-1. こちらを参考
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"types": [
"vitest/globals"
],
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
},
"include": [
"src/**/*",
"tests/**/*"
],
}4. Vitestを導入する
4-1. インストール
npm install -D vite vitest{
"scripts": {
"test": "vitest"
},
"devDependencies": {
"vite": "^4.1.1",
"vitest": "^0.28.4"
}
}4-2. vite.config.tsを生成
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
globals: true,
},
});5. コードを書いて確認
5-1. サンプルコード
mkdir src testsexport const addNumbers = (x: number, y: number): number => {
return x + y;
}import * as module01 from "../src/module01";
describe('Calculate', () => {
test('addNumbers', () => {
expect(module01.addNumbers(3, 6)).toBe(9);
});
});5-2. 実行
npm run test5-3. 実行結果
> test
> vitest
DEV v0.28.4 /home/sondon/dev/wsl/nodejs/unit-test/vitest/exercise02
✓ tests/module01.test.ts (1)
Test Files 1 passed (1)
Tests 1 passed (1)
Start at 19:15:11
Duration 631ms (transform 85ms, setup 0ms, collect 14ms, tests 3ms)
PASS Waiting for file changes...
press h to show help, press q to quit6. セットアップと破棄
6-1. サンプルコード
beforeAll(() => console.log('[1]beforeAll in TopLevel'));
afterAll(() => console.log('[27]afterAll in TopLevel'));
beforeEach(() => console.log('[2,5,8,13,18]beforeEach in TopLevel'));
afterEach(() => console.log('[4,7,12,17,22]afterEach in TopLevel'));
test('TopLevel Test01', () => console.log('[3]Test01 in TopLevel'));
test('TopLevel Test02', () => console.log('[6]Test02 in TopLevel'));
describe('Describe01', () => {
beforeAll(() => console.log('[23]beforeAll in Describe01')); // Unnecessary
afterAll(() => console.log('[24]afterAll in Describe01')); // Unnecessary
beforeEach(() => console.log('[9]beforeEach in Describe01'));
afterEach(() => console.log('[11]afterEach in Describe01'));
test('Test03', () => console.log('[10]Test03'));
});
describe('Describe02', () => {
beforeAll(() => console.log('[25]beforeAll in Describe02')); // Unnecessary
afterAll(() => console.log('[26]afterAll in Describe02')); // Unnecessary
beforeEach(() => console.log('[14,19]beforeEach in Describe02'));
afterEach(() => console.log('[16,21]afterEach in Describe02'));
test('Test04', () => console.log('[15]Test04'));
test('Test05', () => console.log('[20]Test05'));
});6-2. 実行
npm run test6-3. 実行結果
> test
> vitest
DEV v0.28.4 /home/sondon/dev/wsl/nodejs/unit-test/vitest/exercise02
stdout | unknown test
[1]beforeAll in TopLevel
stdout | tests/sample.test.ts > TopLevel Test01
[2,5,8,13,18]beforeEach in TopLevel
[3]Test01 in TopLevel
[4,7,12,17,22]afterEach in TopLevel
stdout | tests/sample.test.ts > TopLevel Test02
[2,5,8,13,18]beforeEach in TopLevel
[6]Test02 in TopLevel
[4,7,12,17,22]afterEach in TopLevel
stdout | tests/sample.test.ts > Describe01 > Test03
[2,5,8,13,18]beforeEach in TopLevel
[9]beforeEach in Describe01
[10]Test03
[11]afterEach in Describe01
[4,7,12,17,22]afterEach in TopLevel
stdout | tests/sample.test.ts > Describe02 > Test04
[2,5,8,13,18]beforeEach in TopLevel
[14,19]beforeEach in Describe02
[15]Test04
[16,21]afterEach in Describe02
[4,7,12,17,22]afterEach in TopLevel
stdout | tests/sample.test.ts > Describe02 > Test05
[2,5,8,13,18]beforeEach in TopLevel
[14,19]beforeEach in Describe02
[20]Test05
[16,21]afterEach in Describe02
[4,7,12,17,22]afterEach in TopLevel
stdout | unknown test
[23]beforeAll in Describe01
[24]afterAll in Describe01
[25]beforeAll in Describe02
[26]afterAll in Describe02
[27]afterAll in TopLevel
✓ tests/sample.test.ts (5)
✓ tests/module01.test.ts (1)
Test Files 2 passed (2)
Tests 6 passed (6)
Start at 19:20:31
Duration 746ms (transform 131ms, setup 0ms, collect 33ms, tests 12ms)
PASS Waiting for file changes...
press h to show help, press q to quit7. 備考
Unit Testを意識して開発するとプロダクトコードの方も更にわかりやすくシンプルに書こうと思うようになるので書ける範囲ではできるだけ書いていきたいですね。
8. 参考
投稿者プロフィール
-
開発好きなシステムエンジニアです。
卓球にハマってます。
