【TypeScript】Vitestを使ってみる

ホーム
BLOG
【TypeScript】
【TypeScript】Vitestを使ってみる

【TypeScript】
2023.02.13

【TypeScript】Vitestを使ってみる

概要
TypeScriptのコンパイラをインストール
tsconfig.json を生成 + 修正
Vitestを導入する
コードを書いて確認
セットアップと破棄
備考
参考

【TypeScript】インターフェイスの実装

1. 概要

Unit Test FrameworkのVitestを触ってみます。

次世代フロントエンドツールのViteを基盤としているようです。

2. TypeScriptのコンパイラをインストール

2-1. こちらを参考

https://isub.co.jp/typescript/typescript-get-started/#tsc-install

3. tsconfig.json を生成 + 修正

3-1. こちらを参考

https://isub.co.jp/typescript/typescript-get-started/#tsconfig-json

{
  "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,
  },
});

Configuring Vitest | Vitest

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