Add Vitest examples to hello world templates in c3 (#5189)

* add vitest examples to hello world templates in c3

* Apply suggestions from code review

Co-authored-by: MrBBot <[email protected]>

* add changeset

* update tests with comments

* Apply suggestions from code review

Co-authored-by: MrBBot <[email protected]>

* Update packages/create-cloudflare/templates/hello-world/js/vitest.config.js

* Update packages/create-cloudflare/templates/hello-world/ts/vitest.config.ts

---------

Co-authored-by: MrBBot <[email protected]>

.changeset/sixty-ants-do.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+test: add vitest-pool-workers package and example tests to `hello-world` templates

packages/create-cloudflare/templates/hello-world/js/package.json

@@ -8,6 +8,8 @@
 		"start": "wrangler dev"
 	},
 	"devDependencies": {
-		"wrangler": "^3.0.0"
+		"wrangler": "^3.0.0",
+		"vitest": "1.3.0",
+		"@cloudflare/vitest-pool-workers": "^0.1.0"
 	}
 }

packages/create-cloudflare/templates/hello-world/js/test/index.spec.js

@@ -0,0 +1,20 @@
+import { env, createExecutionContext, waitOnExecutionContext, SELF } from "cloudflare:test";
+import { describe, it, expect } from "vitest";
+import worker from "../src";
+
+describe("Hello World worker", () => {
+  it("responds with Hello World! (unit style)", async () => {
+    const request = new Request("http://example.com");
+    // Create an empty context to pass to `worker.fetch()`.
+    const ctx = createExecutionContext();
+    const response = await worker.fetch(request, env, ctx);
+    // Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
+    await waitOnExecutionContext(ctx);
+    expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+  });
+
+  it("responds with Hello World! (integration style)", async () => {
+   const response = await SELF.fetch(request, env, ctx);
+   expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+ });
+});

packages/create-cloudflare/templates/hello-world/js/vitest.config.js

@@ -0,0 +1,11 @@
+import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
+
+export default defineWorkersConfig({
+  test: {
+    poolOptions: {
+      workers: {
+        wrangler: { configPath: "./wrangler.toml" },
+      },
+    },
+  },
+});

packages/create-cloudflare/templates/hello-world/js/wrangler.toml

@@ -1,6 +1,7 @@
 name = "<TBD>"
 main = "src/index.js"
 compatibility_date = "<TBD>"
+compatibility_flags = ["nodejs_compat"]
 
 # Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
 # Note: Use secrets to store sensitive data.

packages/create-cloudflare/templates/hello-world/ts/package.json

@@ -5,10 +5,13 @@
 	"scripts": {
 		"deploy": "wrangler deploy",
 		"dev": "wrangler dev",
-		"start": "wrangler dev"
+		"start": "wrangler dev",
+		"test": "vitest"
 	},
 	"devDependencies": {
 		"typescript": "^5.0.4",
-		"wrangler": "^3.0.0"
+		"wrangler": "^3.0.0",
+		"vitest": "1.3.0",
+		"@cloudflare/vitest-pool-workers": "^0.1.0"
 	}
 }

packages/create-cloudflare/templates/hello-world/ts/test/index.spec.ts

@@ -0,0 +1,25 @@
+// test/index.spec.ts
+import { env, createExecutionContext, waitOnExecutionContext, SELF } from "cloudflare:test";
+import { describe, it, expect } from "vitest";
+import worker from "../src/index";
+
+// For now, you'll need to do something like this to get a correctly-typed
+// `Request` to pass to `worker.fetch()`.
+const IncomingRequest = Request<unknown, IncomingRequestCfProperties>;
+
+describe("Hello World worker", () => {
+  it("responds with Hello World! (unit style)", async () => {
+    const request = new IncomingRequest("http://example.com");
+    // Create an empty context to pass to `worker.fetch()`.
+    const ctx = createExecutionContext();
+    const response = await worker.fetch(request, env, ctx);
+    // Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
+    await waitOnExecutionContext(ctx);
+    expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+  });
+
+  it("responds with Hello World! (integration style)", async () => {
+   const response = await SELF.fetch("https://example.com");
+   expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+ });
+});

packages/create-cloudflare/templates/hello-world/ts/test/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "@cloudflare/workers-types/experimental",
+      "@cloudflare/vitest-pool-workers"
+    ]
+  },
+  "include": ["./**/*.ts", "../src/env.d.ts"]
+}

packages/create-cloudflare/templates/hello-world/ts/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
+
+export default defineWorkersConfig({
+  test: {
+    poolOptions: {
+      workers: {
+        wrangler: { configPath: "./wrangler.toml" },
+      },
+    },
+  },
+});

packages/create-cloudflare/templates/hello-world/ts/wrangler.toml

@@ -1,6 +1,7 @@
 name = "<TBD>"
 main = "src/index.ts"
 compatibility_date = "<TBD>"
+compatibility_flags = ["nodejs_compat"]
 
 # Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
 # Note: Use secrets to store sensitive data.