Zod validation for .env throws errors in testing sidebar

[jacknevitt]

In my typescript project, I validate the env variables with Zod like this:

// env.server.ts
import { z } from "zod";

const serverEnvSchema = z.object({
  API_URL: z.string(),
});

export const env = serverEnvSchema.parse(process.env);

This is validated at build time and the variables can be used reliably across the app. The env is then imported like so:

// inviteUser.server.ts
import { env } from "~/config/env.server";

export async function inviteUser(email: string) {
  const result = await fetch(
    env.API_URL + "/invite",
    { method: "POST", body: JSON.stringify({ email }) },
  );
  return result;
}

And then the test file like so:

import { inviteUser } from "./inviteUser.server";

describe("inviteUser", () => {
  it("calls the api with expected values", async () => {
    const fetchSpy = vi.spyOn(global, "fetch");

    // mocked with MSW
    await inviteUser("[email protected]");

    expect(fetchSpy).toBeCalledWith(
      expect.stringContaining("/invite"),
      expect.objectContaining({
        method: "POST",
        body: JSON.stringify({ email: "[email protected]"}),
      })
    );
  });
});

However, when exploring the vitest tests in the vscode testing panel, there are zod errors shown and the tests fail when run from the sidebar. The tests pass with npm run test.

Is there a way to set .env variables for the extension? I have a __mocks__/env.server.ts file, but mocking the file in the test doesn't help.

Any suggestions?

[sheremet-va]

You can set env in the Vitest config file, or via vitest.nodeEnv option in vscode settings.

[jacknevitt]

Thanks, I'll try that when it happens again. Strangely, it's working now I've changed branches to work on something else and came back to it.