🦑

Vitestでいい感じにMock使う！Vitest*Mocking

2023/02/24に公開

TypeScript

始めに

SvelteKit, Viteでのプロダクト開発中にVitestでのMockingを使用したテストいい感じに書けないかなぁと模索したところなんか良さげな書き方見つけたので共有

SvelteKit使ったことない方多いかと思いますがv1系から触ってますって将来言えるのでかっこいいですよ。

環境

node: ^18.0.0
@sveltejs/kit: ^1.0.0
vite: ^4.0.0
vitest: ^0.25.3

テストコード

※import'$hoge'になってますがこの辺は適宜切り替えてください
汎用的に使いまわせるように関数に切り出しているのがポイント。（「unMock -> doMock -> Mock対象のreturn」で使いまわせるように実装しています。）
別ファイルにMock用の汎用関数を切り出してテストファイルから自由にimportして使うと良さそう。

src/lib/utils/getSampleText.ts

// テスト対象の関数
export const getSampleText = (): string => {
    return 'sample text';
}

src/tests/sample.test.ts

// テストコード
import { describe, expect, vi, test } from 'vitest';

// モック
const mockGetSampleText = async (response: string) => {
	const path = '$lib/utils/getSampleText';
	vi.doUnmock(path);
	vi.doMock(path, () => ({
		getSampleText: () => response
	}));
	const { getSampleText } = await import(path);
	return {
		getSampleText
	};
};

// テスト
describe('mock sample', () => {
	test('default mock', async () => {
		const { getSampleText } = await mockGetSampleText('default mock');
		const result = getSampleText();
		expect('default mock').toEqual(result);
	});

	test('updated mock', async () => {
		const { getSampleText } = await mockGetSampleText('updated mock');
		const result = getSampleText();
		expect('updated mock').toEqual(result);
	});
});

最後に

なんか綺麗に実装できるものはないかと悩む日々
ついでにSvelte結構いい感じやで。

始めに

環境

テストコード

最後に

Discussion