GitLab CIでVitestを実行し、coverageを計測する

はじめに

GitLabのCIを使ってVitestのテストを回してみたいなぁと思い、回したときのメモです。

説明しないこと

• GitLabとは？
• CIとは？
• Vitestの詳しい使い方(各種メソッド等)

Vitestとは

• 私が説明するよりも良い記事があったのでこちらから抜粋させていただきます。

VitestはVite環境で利用することができるUnit Testingのフレームワークです。Viteを利用していためViteと同様に高速で動き、TypeScriptなども追加設定なしで利用できることが特徴です。

SvelteKitアプリケーション構築

$ npm create svelte@latest my-app
$ cd my-app
$ npm install
$ npm run dev -- --open

公式

Vitest実装

1. インストール

npm install --save-dev vitest jsdom @testing-library/svelte

2. vite.config.ts修正

vite.config.ts

export default defineConfig({
  ...
  test: {                  // 追加
    environment: 'jsdom'   // 追加
  }                        // 追加
})

3. 実行コマンド追加

package.json(抜粋)

{
  "scripts": {
    "test": "vitest",   // 追加
  },
}

4. テストコード追加

テストコードを置くディレクトリには好みがあると思いますのでご自由に設定ください。

私は↓のようにsrc以下に__test__/index.test.tsを作成しました。

.
├── src
│   ├── __tests__
│   │   ├── index.test.ts

動作確認のため1 + 1 = 2を試してみます

index.test.ts

import { test, expect } from 'vitest'

test('1 + 1 は 2 であること', () => {
  expect(1 + 1).toBe(2);
});

詳しくは公式ドキュメントを見てください。

5. 実行

$ npm run test

watchモードでテストが動きます

Vitest Coverageモード起動

1. インストール

npm i -D @vitest/coverage-c8

2. 実行コマンド追加

package.json(抜粋)

{
  "scripts": {
    "coverage": "vitest run --coverage",   // 追加
  },
}

3. 実行

$ npm run coverage

coverageの計測ができました。
どのコンポーネント、ファイルも参照していないので当然coverageは0%ですね

GitLab CIでテストを実行する

1. .gitlab-ci.yml記入

gitlab-ci.yml

default:
  image: node:18.14-alpine3.16

before_script:
  - npm install

stages:
  - test

test:
  stage: test
  script:
    - npm run coverage

2. pushしてみる

pushすることでpipelineが動き出し、ちゃんと動きました

さいごに

coverageはあくまでテストが通った率であり、これを100%にすればよいというわけではありませんが、1つの指標にはなると思います。良いテスト駆動開発ライフを～！

余談

• src/coverageに結果が出力されるので、それをGitLab Pagesを使ってホスティングすることで、結果をWeb上から確認することができました。