-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vite/Vitest not picking up environment variables? #2117
Comments
Vitest runs with |
@sheremet-va As soon as you
|
Spent many hours trying to load basic environment variables and I'm still on it. Just saying... |
Yeah, I'm having the same issue. It works when the environment is node. But if I'm using
I have created an .env.test file that has I have create an .env.test.local an .env.local.test and all the same issues. The error message from the test is
This works in the browser, not on vitest. |
|
@jamierytlewski, Plus you have a double curly brace at the end of your innerText value which is probably not what you want. |
@sheremet-va |
|
The same issue here, but instead of using process.env I used vi.stubEnv. With the following test:
the test fails on the last expect, meaning that from vitest perspective it actually has loaded the env var, only later it did not pass it to the component under test |
This will make Vitest load your
|
https://stackoverflow.com/a/78206557/11722137 import { defineConfig, mergeConfig } from 'vitest/config';
import viteConfig from './vite.config.js';
import { config } from "dotenv";
export default mergeConfig(viteConfig, defineConfig({
test: {
root: './tests',
env: {
...config({ path: ".env.development" }).parsed,
}, // this work for me
},
})); |
There is no need to install Vitest cannot load all envs because it would break Vite tests that rely on Vite loading only prefixed envs. If you still want to expose any import { loadEnv } from 'vite'
import { defineConfig } from 'vitest/config'
export default defineConfig(({ mode }) => {
return {
test: {
env: loadEnv(mode, process.cwd(), '')
}
}
}) I think we should make it clear in the documentation before closing this issue. |
This fixed it for me: import path from 'path'
import { loadEnvFile } from 'process'
loadEnvFile(path.resolve(__dirname, '.env'))
export default defineVitestConfig({/* */}) |
this worked for me, // vitest.config.ts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import path from 'path'
import dotenv from "dotenv";
dotenv.config({ path: ".env.local" });
export default defineConfig({
plugins: [react()],
test: {
environment: 'jsdom',
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
}) |
@wesamjabali's answer is the only one that I can get to expose
|
This works for me, but I also have a globalSetup file, and there the test environment variables from .env.test aren't loaded... import { defineConfig } from 'vitest/config';
import { loadEnv } from 'vite'
export default defineConfig(({mode}) => {
return {
test: {
include: ['src/**/*.{test,spec}.{js,ts}'],
env: loadEnv(mode, process.cwd(), ''),
globalSetup: ['src/test/globalSetup.ts'],
}
}
}); |
vitest --mode development adding mode flag for vitest command in package.json is working. |
Describe the bug
I am trying to test a file that relies on environment variables, though it doesn't load them. I use vite+vitest with React.js. It works well on development/production, but when I test the component with the variable is undefined: import.meta.env.VITE_API_URL
When I initialize the test, it loads properly on my vite.config.js:
Reproduction
Github repo: https://github.com/IT-Academy-BCN/ita-directory
Branch: https://github.com/IT-Academy-BCN/ita-directory/tree/511-test-recover-password
File: https://github.com/IT-Academy-BCN/ita-directory/blob/511-test-recover-password/frontend/src/__test__/pages/UserFlow/RecoverPassword.test.jsx
System Info
envinfo command not found
Used Package Manager
npm
Validations
The text was updated successfully, but these errors were encountered: