Viteベースの高速テスティングフレームワークVitestを使ってみる

# 任意のディレクトリを作成し以下を実施
npm init -y
npm install -D vite viest @vitest/ui typescript
# tsconfig.jsonを生成
tsc --init

/// <reference types="vitest/config" />
import { defineConfig } from "vite";

export default defineConfig({
  test: {
    globals: true,
  }
});

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "noImplicitAny": false,
    "moduleResolution": "node",
    "types": [
      "vitest/globals" // 追加
    ]
  }
}

describe("Vitest", () => {
  beforeAll(() => {
    console.log("テストファイル開始前");
  });
  afterAll(() => {
    console.log("テストファイル終了後");
  });

  beforeEach(() => {
    console.log("テスト開始前");
  });
  afterEach(() => {
    console.log("テスト終了後");
  });

  test("マッチャー", () => {
    expect(1 + 1).toBe(2);

    expect({foo: "bar"}).toEqual({foo: "bar"});
    expect([1, 2, 3]).toStrictEqual([1, 2, 3]);

    expect(undefined).toBeUndefined();
    expect("foo").toBeDefined();

    expect(true).toBeTruthy();
    expect(false).toBeFalsy();

    expect(null).toBeNull();
    expect("foo").not.toBeNull();

    expect("foo").toHaveLength(3);
    expect([1, 2, 3]).toHaveLength(3);

    expect({foo: "bar", baz: "hoge"}).toHaveProperty("foo");
    expect(["foo", "bar"]).toContain("foo");
    expect([{foo: "bar"}, {foo: "hoge"}]).toContainEqual({foo: "bar"});
    expect("foo12345").toMatch(/foo\d{5}/);

    class CustomError extends Error {
    }

    const throwError = (message: string) => {
      throw new CustomError(message);
    };
    expect(() => throwError("")).toThrow(); // エラーになることを検証
    expect(() => throwError("")).toThrow(CustomError); // 送出したエラーの型判定
  });

  test.each`
    unitPrice | quantity | expected
    ${100}    | ${1}     | ${100}
    ${150}    | ${2}     | ${300}
    ${200}    | ${0}     | ${0}
  `(
    "パラメタライズドテスト:$unitPrice * $quantity = $expected",
    ({unitPrice, quantity, expected}) => {
      expect(unitPrice * quantity).toBe(expected);
    }
  );

  test("モック", () => {
    const mockFn = vi.fn((a: number) => a * 10);
    mockFn(1);
    mockFn(2);

    expect(mockFn.mock.calls).toHaveLength(2);

    expect(mockFn.mock.calls[0][0]).toBe(1); // 1回目の呼出の引数
    expect(mockFn.mock.calls[1][0]).toBe(2); // 2回目の呼出の引数

    expect(mockFn.mock.results[0].value).toBe(10); // 1回目の呼出の戻り値
    expect(mockFn.mock.results[1].value).toBe(20); // 1回目の呼出の戻り値
  });

  test("Expectマッチャーユーティリティ", () => {
    const obj = {
      foo: "bar",
      count: 10,
      id: "123-456",
      nested: {hoge: true, fuga: false},
      array: [1, 2, 3],
    };
    expect(obj).toEqual({
      foo: expect.any(String), // String
      count: expect.anything(), // 値は何でもOK
      id: expect.stringMatching(/\d{3}-\d{3}/), // 正規表現
      nested: expect.objectContaining({hoge: true}), // 指定したkey-valueが含まれていること
      array: expect.arrayContaining([1, 2]), // 配列に要素が含まれていること
    });
  });
  
  test("スナップショットテスト", () => {
    const html = `<div class="container">
  <article>
    <p class="title">UI生成結果</p>
  </article>
</div>`;
    expect(html).toMatchSnapshot();
  });
});

npx vitest

>  DEV  v0.26.1 /Users/noboru-kudo/workspace/vitest
> 
>  (省略)
> 
> ✓ specs/vitest-basic.spec.ts (7)
>
>  Snapshots  1 written
> Test Files  1 passed (1)
>      Tests  7 passed (7)
>   Start at  23:05:34
>   Duration  839ms (transform 345ms, setup 14ms, collect 8ms, tests 15ms)
> 
>  PASS  Waiting for file changes...
>        press h to show help, press q to quit

npx vitest run

npx vitest --ui

test.runIf(process.env.NODE_ENV === "dev")("devモードのみ実行するテスト", () => {
  expect(true).toBe(true);
});

test.skipIf(process.env.NODE_ENV === "dev")("devモードではスキップ", () => {
  expect(true).toBe(true);
});

// プロダクトコード
export function calc(a: number, b: number) {
  return a * b;
}

// テストコード
if (import.meta.vitest) {
  test.each`
    a    | b    | expected
    ${1} | ${0} | ${0}
    ${2} | ${3} | ${6}
    ${0} | ${1} | ${0}
  `("$a x $b = $expected", ({ a, b, expected }) => {
    expect(calc(a, b)).toBe(expected);
  });
}

{
  "compilerOptions": {
    // (省略)
    "types": [
      "vitest/globals",
      "vitest/importMeta" // 追加
    ]
  }
}

export default defineConfig({
  test: {
    globals: true,
    includeSource: ["src/**/*.{js,ts}"] // プロダクトコードを含める
  },
  define: {
    vitest: undefined,
  },
});

test("型チェック", () => {
  expectTypeOf("foo").toEqualTypeOf<string>();
  expectTypeOf<number>(1).toBeNumber();
  expectTypeOf({ foo: "bar" }).toHaveProperty("foo");

  assertType<{ foo: string }>({ foo: "bar" });
  
  // 引数・戻り値
  const fn = (param: string) => param;
  expectTypeOf<typeof fn>().parameters.toEqualTypeOf<[string]>();
  expectTypeOf<typeof fn>().returns.toEqualTypeOf<string>();
});

# --runを除くとWatchモード
npx vitest typecheck --run
> 
> RUN  v0.26.1 /Users/noboru-kudo/workspace/vitest
>
>  ✓ specs/vitest-sample.test-d.ts (1)
> 
>  Test Files  1 passed (1)
>       Tests  1 passed (1)
> Type Errors  no errors
>    Start at  16:02:38
>    Duration  1.01s

npm install -D @vitest/coverage-c8

export default defineConfig({
  define: {
    vitest: undefined,
  },
  test: {
    globals: true,
    coverage: {
      provider: "c8", // デフォルト。istanbulも指定可(要インストール)
      include: ["src/**/*.{js,ts}"], // src配下のみを対象
      exclude: ["src/**/__mocks__/**"], // ディレクトリ除外
      all: true, // 未テストのコードもカバレッジに含める
      reporter: ["html", "clover", "text"] // HTML,Clover,テキスト形式のカバレッジレポート
    }
  }
});

npx vitest run --coverage
> (省略)
>  % Coverage report from c8
> -------------------|---------|----------|---------|---------|------------------------------------
> File               | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                  
> -------------------|---------|----------|---------|---------|------------------------------------
> All files          |   62.56 |    92.85 |   55.81 |   62.56 |                                    
>  RandomService.ts  |   66.66 |      100 |       0 |   66.66 | 4-5                                
>  RandomService2.ts |   66.66 |      100 |      50 |   66.66 | 4-5                                
>  RandomService3.ts |   66.66 |      100 |       0 |   66.66 | 4-5                                
>  RandomUtil.ts     |   71.42 |      100 |       0 |   71.42 | 5-6                                
>  bar.ts            |       0 |        0 |       0 |       0 | 1-6                                
>  foo-bar.ts        |     100 |      100 |      50 |     100 |                                    
>  foo.ts            |     100 |      100 |     100 |     100 |                                    
>  hoge.ts           |       0 |        0 |       0 |       0 | 1-18                               
>  in-source.ts      |   94.11 |      100 |      50 |   94.11 | 4                                  
>  random.ts         |    90.9 |      100 |      50 |    90.9 | 10                                 
>  sample-handler.ts |     100 |      100 |     100 |     100 |                                    
>  timer.ts          |   45.45 |      100 |      25 |   45.45 | 4-10,13-14,16-17,19-20,22-24,47-66 
> -------------------|---------|----------|---------|---------|------------------------------------