SvelteKitでVitestを使う

この記事はSvelteKit Advent Calendar 2022の6日目の記事です。
@kubotakです。

この記事ではSvelteKitでVitestを用いたテストについて紹介します。

ライブラリの導入と設定

まずは以下のライブラリを導入します。

npm install -D vitest jsdom @testing-library/svelte

続いてvite.config.tsを次のように変更します。

vite.config.ts

/// <reference types="vitest" />
import { sveltekit } from '@sveltejs/kit/vite'
import type { UserConfig } from 'vite'

const config: UserConfig = {
  plugins: [sveltekit()],
  test: {
    globals: true,
    environment: 'jsdom',
	include: ['**/*.vitest.ts'],
  },
}

export default config

/// <reference types="vitest" />
はトリプルスラッシュ・ディレクティブと呼ばれるTypeScriptの構文です。UserConfigの型にはtestがないのでvitestの型を依存性として宣言する必要があるため記述しています。

includeの指定によりテストファイルの命名規則は.vitest.tsと独自に作成しています。
指定がない場合は['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}']がデフォルトとなります。
基本的にはデフォルトのままで問題ないですが、前回紹介したPlaywrightによるコンポーネントテストで.spec.tsというテストファイル名をすでに使っているため回避として名前を変更しています。

package.jsonのscriptsにVitestの実行コマンドも用意しておきましょう。

package.json

{
  "scripts": {
    "vitest": "vitest",
  },
}

テスト対象のコード

テスト対象のコードは以下の2つです。
SSR時やCSR時のサーバー処理として行われる+page.server.tsとそのコンポーネントに当たる+page.svelteです。
SvelteKitでは+page.server.tsのload関数で実行された結果をページコンポーネントのPropsのdataとして渡されます。

src/routes/+page.svelte

<script lang="ts">
  import type { OutPutData } from "./+page.server"
  export let data: OutPutData
</script>

<h1>{ data.text }</h1>

src/routes/+page.server.ts

export type OutPutData = {
  text: string
}

export const load = async (): Promise<OutPutData> => {
  return {
    text: 'Hello World!'
  }
}

ページコンポーネントのテスト

それではページコンポーネントのテストから書いていきましょう。
先ほど説明したようにSvelteKitではサーバーで実行された結果がコンポーネントのPropsとなるため、Vitestでは通常のSvelteのコンポーネントテストと同様の扱いでテストが可能です。
※ページコンポーネント内部でXHR等の処理を行っていない場合

src/routes/page.vitest.ts

import { describe, expect, it } from 'vitest'
import { render } from '@testing-library/svelte'
import TopPage from './+page.svelte'

describe('トップページの表示テスト', () => {
  it('Props通りにトップページが表示されること', () => {
    const { getAllByText } = render(TopPage, { props: { data: { text: 'これはテストです' }} })
    expect(getAllByText(/これはテストです/));
  })
})

TestingLibraryのSvelteモジュールを利用してrender関数によりコンポーネントが描画された場合のテキストを取得し、チェックするコードです。

ページサーバーのテスト

サーバー側の処理はload関数の返り値をテストしています。
ここで外部連携によりデータを取得している場合はVitestのMock機能などを用いてテストすることができます。

src/routes/page.server.vitest.ts

import { describe, expect, it } from 'vitest'
import { load } from './+page.server'

describe('トップページサーバーのテスト', () => {
  it('返却値のテスト', async () => {
    const result = await load()
    expect(result.text).toBe('Hello World!')
  })
})

このようにVitestを利用することでコンポーネントとサーバー側の処理をどちらもテストすることができました。
SvelteKitのページの仕組みとして、ページコンポーネントがサーバー側の処理の結果をPropsとして扱われることによりテストもシンプルに書けることがわかります。
明日のアドベントカレンダーではこのページコンポーネントやレイアウトについての詳細を書きたいと思います！