Skip to content

Commit d1ebe76

Browse files
committed
pr feedback
1 parent 1f3cdac commit d1ebe76

File tree

3 files changed

+32
-49
lines changed

3 files changed

+32
-49
lines changed

src/content/docs/workers/testing/index.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@ sidebar:
77

88
import { Render, LinkButton } from "~/components";
99

10-
The Workers platform has a variety of ways to test your applications, depending on your requirements. We recommend using the [Vitest integration](/workers/testing/vitest-integration), which allows for unit testing individual functions within your Worker.
10+
The Workers platform has a variety of ways to test your applications, depending on your requirements. We recommend using the [Vitest integration](/workers/testing/vitest-integration), which allows you to run tests to _inside_ the Workers runtime, and unit test individual functions within your Worker.
1111

1212
<LinkButton href="/workers/testing/vitest-integration/get-started/write-your-first-test/">
1313
Get started with Vitest
1414
</LinkButton>
1515

16-
However, if you don't use Vitest, both [Miniflare's API](/workers/testing/miniflare/writing-tests) and the [`unstable_startWorker()`](/workers/wrangler/api/#unstable_startworker) API provide options for testing your Worker in any testing framework.
17-
1816
## Testing comparison matrix
1917

18+
However, if you don't use Vitest, both [Miniflare's API](/workers/testing/miniflare/writing-tests) and the [`unstable_startWorker()`](/workers/wrangler/api/#unstable_startworker) API provide options for testing your Worker in any testing framework.
19+
2020
| Feature | [Vitest integration](/workers/testing/vitest-integration) | [`unstable_startWorker()`](/workers/wrangler/api/#unstable_startworker) | [Miniflare's API](/workers/testing/miniflare) |
2121
| ------------------------------------------------------------------------ | --------------------------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------- |
2222
| Unit testing ||||

src/content/docs/workers/testing/vitest-integration/get-started/index.mdx

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,4 @@ description: Install and set up the Workers Vitest integration.
1111

1212
import { DirectoryListing } from "~/components";
1313

14-
For most users, Cloudflare recommends using the Workers Vitest integration for testing Workers and [Pages Functions](/pages/functions/) projects. [Vitest](https://vitest.dev/) is a popular JavaScript testing framework featuring a very fast watch mode, Jest compatibility, and out-of-the-box support for TypeScript. In this integration, Cloudflare provides a custom pool that allows your Vitest tests to run _inside_ the Workers runtime.
15-
16-
The Workers Vitest integration:
17-
18-
- Supports both **unit tests** and **integration tests**.
19-
- Provides direct access to Workers runtime APIs and bindings.
20-
- Implements isolated per-test storage.
21-
- Runs tests fully-locally using [Miniflare](https://miniflare.dev/).
22-
- Leverages Vitest's hot-module reloading for near instant reruns.
23-
- Provides a declarative interface for mocking outbound requests.
24-
- Supports projects with multiple Workers.
25-
26-
Get started with one of the available guides:
27-
2814
<DirectoryListing />
29-
30-
:::caution
31-
32-
The Workers Vitest integration does not support testing Workers using the service worker format. [Migrate to the ES modules format](/workers/reference/migrate-to-module-workers/) to use the Workers Vitest integration.
33-
34-
:::

src/content/docs/workers/testing/vitest-integration/get-started/write-your-first-test.mdx

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -38,30 +38,27 @@ First, make sure that:
3838

3939
## Define Vitest configuration
4040

41-
Create a `vitest.config.js` or `vitest.config.ts` file if you do not already have one.
42-
Then add the following snippet, which uses `defineWorkersConfig` to configure the Workers Vitest integration.
41+
In your `vitest.config.ts` file, use `defineWorkersConfig` to configure the Workers Vitest integration.
4342

44-
There are two ways to configure the Workers Vitest integration.
43+
You can use your Worker configuration from your [Wrangler config file](/workers/wrangler/configuration/) by specifying it with `wrangler.configPath`.
4544

46-
1. If you want to use the same configuration as your Worker, you can simply reference a Wrangler file via `wrangler.configPath`.
45+
```ts title = vitest.config.ts
46+
import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
4747

48-
```ts title = vitest.config.ts
49-
import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
50-
51-
export default defineWorkersConfig({
52-
test: {
53-
poolOptions: {
54-
workers: {
55-
wrangler: { configPath: "./wrangler.toml" },
56-
},
57-
},
58-
},
59-
});
60-
```
48+
export default defineWorkersConfig({
49+
test: {
50+
poolOptions: {
51+
workers: {
52+
wrangler: { configPath: "./wrangler.toml" },
53+
},
54+
},
55+
},
56+
});
57+
```
6158

62-
2. You can override configuration using the `miniflare` key.
59+
You can also override or define additional configuration using the `miniflare` key. This takes precedence over values set in via your Wrangler config.
6360

64-
For example, this configuration would add a KV namespace `TEST_NAMESPACE` that was only accessed and modified in tests.
61+
For example, this configuration would add a KV namespace `TEST_NAMESPACE` that was only accessed and modified in tests.
6562

6663
```js null {6-8}
6764
export default defineWorkersConfig({
@@ -84,9 +81,12 @@ For a full list of available configuration options, refer to [Configuration](/wo
8481

8582
## Define types
8683

87-
First make sure you have run [`wrangler types`](/workers/wrangler/commands/), which generates `Env` types based on your Worker's bindings and [runtime types](/workers/languages/typescript/).
84+
If you are not using Typescript, you can skip this section.
85+
86+
First make sure you have run [`wrangler types`](/workers/wrangler/commands/), which generates [types for the Cloudflare Workers runtime](/workers/languages/typescript/) and an `Env` type based on your Worker's bindings.
8887

89-
If you are using TypeScript, you will need to define types for Cloudflare Workers and `cloudflare:test` to make sure they are detected appropriately. Add a `tsconfig.json` in your tests folder and add `"@cloudflare/vitest-pool-workers"` to your types array.
88+
Then add a `tsconfig.json` in your tests folder and add `"@cloudflare/vitest-pool-workers"` to your types array to define types for `cloudflare:test`.
89+
You should also add the output of `wrangler types` to the `include` array so that the types for the Cloudflare Workers runtime are available.
9090

9191
<Details header="Example test/tsconfig.json">
9292
```jsonc title="test/tsconfig.json"
@@ -106,7 +106,7 @@ If you are using TypeScript, you will need to define types for Cloudflare Worker
106106
```
107107
</Details>
108108

109-
You also need to define the type of the `env` object that is passed to your tests. Create an `env.d.ts` file in your tests folder, with the following content:
109+
You also need to define the type of the `env` object that is provided to your tests. Create an `env.d.ts` file in your tests folder, and declare the `ProvidedEnv` interface by extending the `Env` interface that is generated by `wrangler types`.
110110

111111
```ts title="test/env.d.ts"
112112
declare module "cloudflare:test" {
@@ -117,9 +117,9 @@ declare module "cloudflare:test" {
117117

118118
If your test bindings differ from the bindings in your Wrangler config, you should type them here in `ProvidedEnv`.
119119

120-
## Write a unit test
120+
## Writing tests
121121

122-
Given an example Worker like this:
122+
We will use this simple Worker as an example. It returns a 404 response for the `/404` path and `"Hello World!"` for all other paths.
123123

124124
<TypeScriptExample filename="src/index.ts">
125125
```ts
@@ -132,9 +132,12 @@ export default {
132132
},
133133
} satisfies ExportedHandler<Env>;
134134
```
135+
135136
</TypeScriptExample>
136137

137-
You might want to add a test like this to check that the Worker response correctly to a request at `/404`.
138+
### Unit tests
139+
140+
By importing the Worker we can write a unit test for its `fetch` handler.
138141

139142
<TypeScriptExample filename="test/unit.spec.ts">
140143
```ts
@@ -168,7 +171,7 @@ You might want to add a test like this to check that the Worker response correct
168171

169172
</TypeScriptExample>
170173

171-
## Write an integration test
174+
### Integration tests
172175

173176
You can use the SELF fetcher provided by the `cloudflare:test` to write an integration test. This is a service binding to the default export defined in the main Worker. The main Worker runs in the same isolate/context as tests so any global mocks will apply to it too.
174177

0 commit comments

Comments
 (0)