How to Separate .dev.vars for Local Development and Unit Testing with Vitest

[ryokryok]

Below are the steps I've taken to separate .dev.vars for local development and unit testing. If there's a better way to achieve this, please let me know in the comments!

---

I prefer not to hardcode secure information like API keys directly into wrangler.json. I find it better to keep them in a .dev.vars file that isn't tracked by Git.

Taking this a step further, I wanted to use separate sets of variables for local development and unit testing. To achieve this, I created two .dev.vars files:

For local development: .dev.vars - Contains development-specific API keys and other variables.

MY_VARIABLE="development_value"

For unit testing: .dev.vars.test - Contains values specifically for testing. Since this is used for CI tests, it's safe to commit these values to Git.

MY_VARIABLE="test_value"

In vitest.config.mts, I configured it to load the test environment:

import { defineWorkersConfig } from '@cloudflare/vitest-pool-workers/config';

export default defineWorkersConfig({
  test: {
    poolOptions: {
      workers: {
        wrangler: {
          configPath: './wrangler.jsonc',
          environment: 'test', // add this line
        },
      },
    },
  },
});

I added the following to wrangler.json to address a warning message in the console:

  "env": {
    "test": {}
  }

I then used npm wrangler types to generate types from .dev.vars and updated src/index.ts:

export default {
	async fetch(request, env, ctx): Promise<Response> {
		return new Response(env.MY_VARIABLE);
	},
} satisfies ExportedHandler<Env>;

Finally, I updated test/index.spec.ts:

import { env, createExecutionContext, waitOnExecutionContext, SELF } from 'cloudflare:test';
import { describe, it, expect } from 'vitest';
import worker from '../src/index';

const IncomingRequest = Request<unknown, IncomingRequestCfProperties>;

describe('Hello World worker', () => {
	it('responds with env.MY_VARIABLE (unit style)', async () => {
		const request = new IncomingRequest('http://example.com');
		const ctx = createExecutionContext();
		const response = await worker.fetch(request, env, ctx);
		await waitOnExecutionContext(ctx);
		expect(await response.text()).toMatchInlineSnapshot(`"test_value"`); // This is the value of MY_VARIABLE in your .dev.vars.test file
	});

	it('responds with env.MY_VARIABLE (integration style)', async () => {
		const response = await SELF.fetch('https://example.com');
		expect(await response.text()).toMatchInlineSnapshot(`"test_value"`); // This is the value of MY_VARIABLE in your .dev.vars.test file
	});
});

This setup allows me to use different .dev.vars files for local development and unit testing.