【TypeScript】Vitestを使ってみる

TypeScript

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 tests

export 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 test

5-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 quit

6. セットアップと破棄

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 test

6-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 quit

7. 備考

Unit Testを意識して開発するとプロダクトコードの方も更にわかりやすくシンプルに書こうと思うようになるので書ける範囲ではできるだけ書いていきたいですね。

8. 参考

関連記事

  1. 【React×TypeScript】環境構築メモ

  2. TypeScript

    【TypeScript】ループ時の非同期処理の処理順序(async/a…

  3. 【React】FullCalendarのヘッダーツールバーを整えるため…

  4. 【React】FullCalendarのカレンダーを整えるためのTip…

  5. TypeScript

    【TypeScript】触ってみる

  6. 【TypeScript】filterを使って配列からundefined…

最近の記事

  1. PHP
  2. PHP
  3. TypeScript
  4. Docker
  5. AWS
  6. Docker

制作実績一覧

  1. Checkeys