送信リクエストのモック

@msw/cloudflare ↗ を使うと、@cloudflare/vitest-plugin で送信 HTTP リクエストと WebSocket リクエストをモックできます。この連携は、Worker がエクスポートしたハンドラーを呼ぶユニットテストと、exports.default.fetch() を呼ぶ統合テストの両方に対応します。

依存関係をインストールする

Mock Service Worker (MSW) のバージョン 2.14 以降と、Cloudflare 連携パッケージをインストールします。

npm i -D msw@^2.14.0 @msw/cloudflare

yarn add -D msw@^2.14.0 @msw/cloudflare

pnpm add -D msw@^2.14.0 @msw/cloudflare

bun add -d msw@^2.14.0 @msw/cloudflare

ネットワークモックを作成する

テスト用の共有ネットワークモックを作成します。

test/network.jsjs

import { setupNetwork } from "@msw/cloudflare";

export const network = setupNetwork();

test/network.tsts

import { setupNetwork } from "@msw/cloudflare";

export const network = setupNetwork();

Vitest のセットアップファイルで、テスト開始前にモックを有効にし、各テストのあとでハンドラーをリセットし、テスト終了後に停止します。

test/setup.jsjs

import { afterAll, afterEach, beforeAll } from "vitest";
import { network } from "./network";

beforeAll(() => network.enable());
afterEach(() => network.resetHandlers());
afterAll(() => network.disable());

test/setup.tsts

import { afterAll, afterEach, beforeAll } from "vitest";
import { network } from "./network";

beforeAll(() => network.enable());
afterEach(() => network.resetHandlers());
afterAll(() => network.disable());

Vitest の設定で、setupFiles 配列にこのセットアップファイルを追加します。

HTTP リクエストをモックする

network.use() と MSW のリクエストハンドラーで、送信リクエストに対するレスポンスを返します。次の例は、外部 API から挨拶を取得する Worker をテストします。

src/index.jsjs

export default {
	async fetch() {
		return fetch("https://api.example.com/greeting");
	},
};

src/index.tsts

export default {
	async fetch(): Promise<Response> {
		return fetch("https://api.example.com/greeting");
	},
} satisfies ExportedHandler;

test/worker.test.jsjs

import {
	createExecutionContext,
	waitOnExecutionContext,
} from "cloudflare:test";
import { env } from "cloudflare:workers";
import { http, HttpResponse } from "msw";
import { expect, it } from "vitest";
import worker from "../src";
import { network } from "./network";

it("mocks an outbound request", async () => {
	network.use(
		http.get("https://api.example.com/greeting", () => {
			return HttpResponse.json({ message: "Hello" });
		}),
	);

	const ctx = createExecutionContext();
	const response = await worker.fetch(
		new Request("https://example.com"),
		env,
		ctx,
	);
	await waitOnExecutionContext(ctx);
	expect(await response.json()).toEqual({ message: "Hello" });
});

test/worker.test.tsts

import { createExecutionContext, waitOnExecutionContext } from "cloudflare:test";
import { env } from "cloudflare:workers";
import { http, HttpResponse } from "msw";
import { expect, it } from "vitest";
import worker from "../src";
import { network } from "./network";

it("mocks an outbound request", async () => {
	network.use(
		http.get("https://api.example.com/greeting", () => {
			return HttpResponse.json({ message: "Hello" });
		}),
	);

	const ctx = createExecutionContext();
	const response = await worker.fetch(
		new Request("https://example.com"),
		env,
		ctx,
	);
	await waitOnExecutionContext(ctx);
	expect(await response.json()).toEqual({ message: "Hello" });
});

送信 WebSocket をモックする

Worker が作成する WebSocket 接続は、MSW の ws.link() API でモックできます。request-mocking フィクスチャ ↗ には、HTTP、exports.default.fetch()、WebSocket の例があります。