模拟出站请求

使用 @msw/cloudflare ↗ 和 @cloudflare/vitest-plugin 模拟出站 HTTP 与 WebSocket 请求。此集成支持调用 Worker 导出处理程序的单元测试，以及调用 exports.default.fetch() 的集成测试。

安装依赖项

安装 Mock Service Worker (MSW) 3 或更高版本及 Cloudflare 集成：

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

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

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

bun add -d msw@^3.0.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

使用 MSW 的 ws.link() API 模拟 Worker 创建的 WebSocket 连接。请求模拟示例 ↗包含 HTTP、exports.default.fetch() 和 WebSocket 示例。