How do I access my .env variables from a Vitest test?

You can include the dotenv package(if thats what you are using) into the vitest.config.ts file, it will look something like this below:

import { defineConfig } from 'vitest/config';
import { resolve } from 'path';

export default defineConfig({
  root: '.',
  esbuild: {
    tsconfigRaw: '{}',
  },
  test: {
    clearMocks: true,
    globals: true,
    setupFiles: ['dotenv/config'] //this line,
  },
  resolve: {
    alias: [{ find: '~', replacement: resolve(__dirname, 'src') }],
  },
});

For whoever lands here after removing the dotenv lib because Node v20.6.0+ handles .env files automatically, just use the loadEnv function from vite in your vitest.config.ts:

import { loadEnv } from 'vite';
import { defineConfig } from 'vitest/config';

export default defineConfig(({ mode }) => ({
    test: {
        // mode defines what ".env.{mode}" file to choose if exists
        env: loadEnv(mode, process.cwd(), ''),
    },
}));

Provided you use a default .env file.

I know this question is quite old, but my workaround to this was parsing my .env file inside vitest.config:

import { config } from "dotenv";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    passWithNoTests: true,
    globals: true,
    coverage: {
      provider: "v8",
      exclude: ["**/tests/**"],
    },
    env: {
      ...config({ path: "./env/.testing.env" }).parsed,
    },
  },
  plugins: [tsconfigPaths()],
});

This allows me to have multiple config files using mergeConfig from Vitest in case of multiple testing environments.

If I'm not wrong you can also do this by setting up setup and teardown functions as a global setup files.

export async function setup() {
  // LOAD .ENV HERE
  app.listen(env.PORT, () => {
    console.log("Started testing server...");
  });
}

export async function teardown() {
  await app.stop();
}

EDIT1: Actually this last setup cannot load variables for the testing context. This setup happens to be a globalSetup config in vitest.config.ts that runs outside the tests context. It is meant to be used for external setups like starting a server, initializing a database connection or cleaning up a database.

I use the vite loadEnv function in vitest.config.ts and that works:

import { defineConfig } from 'vitest/config'
import { loadEnv } from 'vite'

export default defineConfig({
    test: {
        environment: 'jsdom',
        env: loadEnv('', process.cwd(), ''),
    },
})

If you are using dotEnv

1. Load the env with config()/dotenv.config() up to you
2. point the your envs in the config

import { defineConfig } from 'vitest/config'
import { config } from 'dotenv'
//#1
config()

export default defineConfig({
  test: {
    ...
   //#2
    env: process.env,
    ...
  }
})

Thanks to the discussion linked by @RobinBozan, I was able to load my .env file before vitest runs in Node.js v20+. I added the following scripts to my package.json:

{
  "scripts": {
    "vitest": "node --env-file=.env ./node_modules/vitest/vitest.mjs",
    "test": "yarn vitest run"
  }
}

Now, I run my test suite with:

yarn test

Output:

yarn run v1.22.22
$ yarn vitest run
$ node --env-file=.env ./node_modules/vitest/vitest.mjs run

...

I'm using yarn to execute my scripts here, but you can use your package manager's equivalent, such as npx.

vitest will automatically load your .env file(s) from the project root directory, which probably isn't the same directory as your test files. Your file structure might look something like this:

🗁 project
  🖹 .env
  🖹 package.json
  🖹 vite.config.json
  🗁 src/
    🖹 myCode.js
  🗁 test/
    🖹 myCode.test.js

In node, you access a variable using import.meta.env.VITE_MY_VARIABLE_NAME. In HTML, use the special syntax %VITE_MY_VARIABLE_NAME%.

If you're still getting undefined variables, add the VITE_ prefix to your variable name, which tells vite the value is safe to expose.

Load environment variables

• This example is work next.js but should work aswell with dotenv
• vitest.config.ts

// ==== VITEST ====
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

// ==== NEXT.JS ====
import { loadEnvConfig } from '@next/env'
loadEnvConfig(process.cwd())

export default defineConfig({
    plugins: [tsconfigPaths(), react()],
    test: {
        environment: 'node',
        globalSetup: 'test/setup-tests.ts'
    }
})

• environment must be node. jsdom will not work

import.meta.env.%VARIABLE_NAME%

Got it from here: https://stackoverflow.com/a/70711231

In Node.js Assuming you want to access your env variable VAR you should prefix it with VITE_ like:

VITE_VAR=123

then you can access it regularly with process.env.VITE_VAR

import tsconfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from 'vitest/config';

import { config } from 'dotenv';

const env = config({ path: '.env.test' });

export default defineConfig({
  plugins: [tsconfigPaths()],
  test: {
    include: ['src/**/*.test.ts', 'stacks/**/*.test.ts'],
    env: env.parsed
  },
});